Header Ads

  • Home / CSS / Tombol Download Dengan Animasi Bubble

    Tombol Download Dengan Animasi Bubble

    8:37 AM 0 0 0
    CSS Tombol Download Dengan Animasi Bubble

    Tutorial tombol download super unik, keren, menarik dan premium menggunakan kode HTML5 dan CSS3 dengan tampilan animasi bubble yang atraktif dan dinamis ditambah penggunaan warna candy yang ciamik. Yuk disimak info mengenai cara membuat tombol download ini biar makin kece deh blognya.

    Bosen ga sih melihat blog yang isinya hanya tulisan saja tanpa variasi ataupun kreasi unik ?. Blog itu sifatnya personal bukan sebuah website formal yang berisi informasi padat tanpa ciri khas. Dengan blog kita bebas berkreasi untuk memberikan personalisasi dan cita rasa tersendiri agar blog bisa terlihat unik dan menjadi menarik.

    Blog yaa blog, santai aja, nikmati cara kita sendiri dalam berkreasi untuk memberikan sentuhan pribadi agar bisa tampil beda dan memiliki ciri khas tersendiri. Seperti blog CodeFlare yang memiliki ciri khas dalam tampilan ataupun dalam isi konten artikel.

    Jika kebetulan blog kamu memiliki niche download, techno, ataupun berbagi informasi yang menggunakan link external maka salah satu trik untuk membuat blog kamu bisa tampil beda yaitu dengan menggunakan style tombol download modifikasi codeflare yang unik dan menarik. Style tombol download ini bisa digunakan untuk berbagai kebutuhan blogging kamu.

    Apa itu tombol download ?


    adalah tombol atau teks yang dibuat seperti tombol yang dapat diklik pada halaman situs web atau posting blog yang memungkinkan pengguna bernavigasi dari satu halaman ke halaman lainnya atau dari halaman menuju tautan file pada server internet.

    Tombol download berguna untuk memberikan arahan tautan navigasi yang jelas dan untuk mempermudah pengguna/pengunjung dalam menjelajah halaman blog.

    Bagaimana cara membuat tombol download ?


    Tombol Download Dengan Animasi Bubble dibuat hanya menggunakan kode CSS yang sederhana tapi powerful dalam memberikan tampilan yang menggoda. Penggunaan tombol ini tidak hanya sebatas sebagai tombol download, tapi bisa juga digunakan sebagai tombol preview, tombol link URL, tombol live demo dan tombol link lainnya.

    Contoh tampilan tombol download dengan animasi bubble seperti yang terlihat di bawah ini. Jika cursor mouse berada pada area tombol maka akan terlihat animasi bubble yang seperti air soda.

    Tombol Besar
    Download Download Download

    Download Download Download

    Tombol Sedang
    Download Download Download

    Download Download Download

    Tombol Kecil
    Download Download Download

    Download Download Download


    Animasi pada tombol di atas tersebut hanya menggunakan kode CSS sehingga bisa langsung diterapkan pada tombol hyperlink atau anchor tag yang sudah ada, tinggal menambahkan nama class saja untuk bisa menggunakan style tombol download ini tanpa perlu melakukan perubahan yang rumit.

    Oke... bagi sobat blogger yang tertarik ingin menggunakan style dari tombol download ini silakan disimak sampai tuntas mulai dari cara pembuatan, pemasangan serta cara modifikasinya agar bisa disesuaikan dengan penggunaan tema (template) blog kamu.

    Informasi Singkat
    CodeFlare — is a blog, a beautiful blog, an inspiration blog and full with magic. CodeFlare is not just a blog its a creative blog with usefull information and great article content.

    CodeFlare is open to the public, so anyone can visit and tell a story. Everything from this blog is beyond our imagination, some might say that it's full of wonder for its unique and interesting style art of blogging.

    So... yes CodeFlare is a blog and you can visit CodeFlare by anytime anywhere as long as you have internet connection.

    Wanna see some magic ? come and join our adventure to the world of CodeFlare.
    Sumber : Wikipedia



    Cara Pemasangan Widget Pada Blogger


    Cara Pemasangan Kode CSS Ke Dalam Template Blog
    Tombol download dengan animasi bubble hanya menggunakan kode CSS untuk tampilan style dan penggunaan animasi. Pemasangan kode CSS pada blog bisa ditaruh di dalam template blog atau bisa juga ditaruh pada kotak widget blog selama kotak widget tersebut bisa terlihat disemua halaman blog.

    • Silakan login dahulu ke blog Anda.

    • Klik tombol Tema untuk masuk ke tema editor.


    • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


    • Geser scrollbar ke posisi paling bawah.


    • Letakan kode dibawah ini tepat diatas kode </body>.


      <style>
      :root {
      --cfl-image:url('data:image/png;base64,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');
      }
      .cfl-button{
      font:15px Calibri, Arial, sans-serif;
      text-shadow:1px 1px 0 rgba(255,255,255,0.4);
      text-decoration:none !important;
      white-space:nowrap;
      display:inline-block;
      vertical-align:baseline;
      position:relative;
      cursor:pointer;
      padding:10px 20px;
      background-repeat:no-repeat;
      background-position:bottom left;
      background-image:var(--cfl-image);
      background-position:bottom left, top right, 0 0, 0 0;
      background-clip:border-box;
      -moz-border-radius:8px;
      -webkit-border-radius:8px;
      border-radius:8px;
      box-shadow:inset 0px 1px 0px 0px #fff;
      -webkit-transition:background-position 1s;
      -moz-transition:background-position 1s;
      transition:background-position 1s;
      }
      .cfl-button:hover{
      background-position:top left;
      background-position:top left, bottom right, 0 0, 0 0;
      }
      .cfl-button:active{
      bottom:-1px;
      }
      /* The three buttons sizes by https://codeflare.blogspot.com */
      .cfl-button.big { font-size:30px;}
      .cfl-button.medium { font-size:18px;}
      .cfl-button.small { font-size:13px;}

      /* Blue Button by https://codeflare.blogspot.com */
      .blue.cfl-button{
      color:#0f4b6d !important;
      border:1px solid #84acc3 !important;
      background-color: #48b5f2;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7, #3faeeb);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
      }
      .blue.cfl-button:hover{
      background-color:#63c7fe;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe, #58bef7);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
      }
      /* Green Button by https://codeflare.blogspot.com */
      .green.cfl-button{
      color:#345903 !important;
      border:1px solid #96a37b !important;
      background-color: #79be1e;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
      }
      .green.cfl-button:hover{
      background-color:#89d228;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
      background-image:var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
      }

      /* Orange Button by https://codeflare.blogspot.com */
      .orange.cfl-button{
      color:#693e0a !important;
      border:1px solid #bea280 !important;
      background-color: #e38d27;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
      }
      .orange.cfl-button:hover{
      background-color:#ec9732;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
      }
      /* Gray Button by https://codeflare.blogspot.com */
      .gray.cfl-button{
      color:#525252 !important;
      border:1px solid #a5a5a5 !important;
      background-color: #a9adb1;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
      }
      .gray.cfl-button:hover{
      background-color:#b6bbc0;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
      }
      /* Red Button by https://codeflare.blogspot.com */
      .red.cfl-button{
      color:#441010 !important;
      border:1px solid #FE8080 !important;
      background-color: #FF0000;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(255,0,0,1) 0,rgba(255,0,0,0) 100px),-moz-linear-gradient(#FF0000, #FE8080);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(255,0,0,1)), to(rgba(255,0,0,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#FE8080));
      }
      .red.cfl-button:hover{
      background-color:#FF0000;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(255,0,0,1) 0,rgba(255,0,0,0) 100px),-moz-linear-gradient(#FF0000, #FE8080);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(255,0,0,1)), to(rgba(255,0,0,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#FE8080));
      }
      /* Purple Button by https://codeflare.blogspot.com */
      .purple.cfl-button{
      color:#441438 !important;
      border:1px solid #FE80DF !important;
      background-color: #CC0099;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(204,0,153,1) 0,rgba(221,71,284,0) 100px),-moz-linear-gradient(#FF0000, #FE8080);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(204,0,153,1)), to(rgba(221,71,284,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC0099), to(#FE80DF));
      }
      .purple.cfl-button:hover{
      background-color:#CC0099;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(204,0,153,1) 0,rgba(221,71,284,0) 100px),-moz-linear-gradient(#FF0000, #FE8080);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(204,0,153,1)), to(rgba(221,71,284,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC0099), to(#FE80DF));
      }
      </style>

    Cara Pemasangan Kode CSS Didalam Widget Blog
    Apabila kode CSS untuk tombol download ini ingin dipasang pada kotak widget blog, maka silakan kamu copy-paste kode CSS tersebut ke dalam kotak widget blog atau tekan tombol Add to Blogger yang ada di bawah untuk mempercepat proses pemasangan ke dalam kotak widget blog.
    1. Login ke blogspot untuk masuk ke dashboard blog.
    2. Pilih Tata Letak kemudian pilih Tambahkan Gadget.


    3. Pilih HTML/Javascript

    4. Taruh kode pada kotak widget, setelah selesai tekan tombol Save


      <style>
      :root {
      --cfl-image:url('data:image/png;base64,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');
      }
      .cfl-button{
      font:15px Calibri, Arial, sans-serif;
      text-shadow:1px 1px 0 rgba(255,255,255,0.4);
      text-decoration:none !important;
      white-space:nowrap;
      display:inline-block;
      vertical-align:baseline;
      position:relative;
      cursor:pointer;
      padding:10px 20px;
      background-repeat:no-repeat;
      background-position:bottom left;
      background-image:var(--cfl-image);
      background-position:bottom left, top right, 0 0, 0 0;
      background-clip:border-box;
      -moz-border-radius:8px;
      -webkit-border-radius:8px;
      border-radius:8px;
      box-shadow:inset 0px 1px 0px 0px #fff;
      -webkit-transition:background-position 1s;
      -moz-transition:background-position 1s;
      transition:background-position 1s;
      }
      .cfl-button:hover{
      background-position:top left;
      background-position:top left, bottom right, 0 0, 0 0;
      }
      .cfl-button:active{
      bottom:-1px;
      }
      /* The three buttons sizes by https://codeflare.blogspot.com */
      .cfl-button.big { font-size:30px;}
      .cfl-button.medium { font-size:18px;}
      .cfl-button.small { font-size:13px;}

      /* Blue Button by https://codeflare.blogspot.com */
      .blue.cfl-button{
      color:#0f4b6d !important;
      border:1px solid #84acc3 !important;
      background-color: #48b5f2;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7, #3faeeb);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
      }
      .blue.cfl-button:hover{
      background-color:#63c7fe;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe, #58bef7);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
      }
      /* Green Button by https://codeflare.blogspot.com */
      .green.cfl-button{
      color:#345903 !important;
      border:1px solid #96a37b !important;
      background-color: #79be1e;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
      }
      .green.cfl-button:hover{
      background-color:#89d228;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
      background-image:var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
      }

      /* Orange Button by https://codeflare.blogspot.com */
      .orange.cfl-button{
      color:#693e0a !important;
      border:1px solid #bea280 !important;
      background-color: #e38d27;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
      }
      .orange.cfl-button:hover{
      background-color:#ec9732;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
      }
      /* Gray Button by https://codeflare.blogspot.com */
      .gray.cfl-button{
      color:#525252 !important;
      border:1px solid #a5a5a5 !important;
      background-color: #a9adb1;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
      }
      .gray.cfl-button:hover{
      background-color:#b6bbc0;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
      }
      /* Red Button by https://codeflare.blogspot.com */
      .red.cfl-button{
      color:#441010 !important;
      border:1px solid #FE8080 !important;
      background-color: #FF0000;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(255,0,0,1) 0,rgba(255,0,0,0) 100px),-moz-linear-gradient(#FF0000, #FE8080);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(255,0,0,1)), to(rgba(255,0,0,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#FE8080));
      }
      .red.cfl-button:hover{
      background-color:#FF0000;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(255,0,0,1) 0,rgba(255,0,0,0) 100px),-moz-linear-gradient(#FF0000, #FE8080);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(255,0,0,1)), to(rgba(255,0,0,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#FE8080));
      }
      /* Purple Button by https://codeflare.blogspot.com */
      .purple.cfl-button{
      color:#441438 !important;
      border:1px solid #FE80DF !important;
      background-color: #CC0099;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(204,0,153,1) 0,rgba(221,71,284,0) 100px),-moz-linear-gradient(#FF0000, #FE8080);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(204,0,153,1)), to(rgba(221,71,284,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC0099), to(#FE80DF));
      }
      .purple.cfl-button:hover{
      background-color:#CC0099;
      background-image: var(--cfl-image),var(--cfl-image),-moz-radial-gradient( center bottom, circle,rgba(204,0,153,1) 0,rgba(221,71,284,0) 100px),-moz-linear-gradient(#FF0000, #FE8080);
      background-image: var(--cfl-image),var(--cfl-image),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(204,0,153,1)), to(rgba(221,71,284,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC0099), to(#FE80DF));
      }
      </style>

      KETERANGAN
      Contoh untuk cara penggunaan kode CSS di atas bisa dilihat pada bab selanjutnya. Kode CSS di atas tersebut masih bisa kamu modifikasi lagi agar tampilan tombol bisa lebih unik dan bisa menyesuaikan dari penggunaan template yang kamu gunakan.

    Cara Menggunakan Style Tombol Download


    Penggunaan style tombol download ini cukup mudah, tinggal memberikan nama class pada elemen HTML yang akan dijadikan tombol download. Jika menggunakan elemen anchor tag maka penulisan kode seperti berikut ini.

    Download

    <a class="cfl-button big blue" href="link-tujuan" rel="nofollow" target="_blank">Download</a>

    Pada Kode :
    cfl-button -- merupakan nama elemen class untuk pengaturan dasar dari style tombol download.

    big -- merupakan nama elemen class untuk pengaturan ukuran dimensi dari style tombol download. Secara default tersedia tiga ukuran dimensi yang sudah didefinisikan.

    big | untuk ukuran besar.
    medium | untuk ukuran sedang.
    small | untuk ukuran kecil.

    blue -- merupakan nama elemen class untuk pengaturan penggunaan warna dari style tombol download. Secara default tersedia enam pilihan warna yang bisa kamu gunakan.

    blue | untuk warna biru.
    green | untuk warna hijau.
    orange | untuk warna oranye.
    gray | untuk warna abu-abu.
    red | untuk warna merah.
    purple | untuk warna ungu.

    href="link-tujuan"
    Merupakan kode untuk link tujuan, bisa untuk link internal ataupun link eksternal.

    Contoh 1
    Jika kamu ingin menggunakan style tombol download animasi bubble kecil dan menggunakan warna hijau maka penggunaan kode class pada elemen HTML sebagai berikut.

    Download

    <a class="cfl-button small green" href="link-tujuan" rel="nofollow" target="_blank">Download</a>


    Contoh 2
    Jika kamu ingin menggunakan style tombol download animasi bubble sedang dan menggunakan warna merah maka penggunaan kode class pada elemen HTML sebagai berikut.

    Download

    <a class="cfl-button medium red" href="link-tujuan" rel="nofollow" target="_blank">Download</a>


    Contoh 3
    Jika kamu ingin menggunakan style tombol sebagai link preview dengan animasi bubble sedang dan menggunakan warna ungu maka penggunaan kode HTML dan class sebagai berikut.

    Preview

    <a class="cfl-button medium purple" href="link-tujuan" rel="nofollow" target="_blank">Preview</a>


    Contoh 4
    Jika kamu ingin menggunakan style tombol sebagai link preview dengan animasi bubble digabungkan dengan penggunaan icon dari font awesome maka penggunaan kode HTML dan class sebagai berikut.

    Preview Download

    <a class="cfl-button big orange" href="link-tujuan" rel="nofollow" target="_blank"><i class="fa fa-rocket" aria-hidden="true"></i> Preview</a>

    Pastikan kamu sudah memasang plugin font-awesome terlebih dahulu jika ingin ditambahkan dengan penggunaan icon font awesome.

    Penggunaan nama class pada elemen HTML sangat fleksibel sehingga cukup mudah untuk menerapkan penggunaan style dari tombol download ini. Penempatan kode CSS bisa juga ditempatkan secara langsung pada halaman konten artikel blog.

    Demikian artikel blog tentang Tombol Download Dengan Animasi Bubble terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.


    Keyword


    blog, blogger, blogspot, code, html, html5, css, css3, script, button, create, bubble, link, hyperlink, download, promo, promoted, preview, open, close, live, edit, goto

    Incoming Search Term


    Cara bikin tombol download dengan animasi ringan, cara buat download button menggunakan kode css, CSS code for animated buttons, create css 3d buttons, how to make animated download buttons, cara pasang tombol download di blog, cara membuat tombol preview download pake kode css html, tutorial bikin tombol download blogger, tombol download paling keren terbaru, belajar koding bikin tombol download
    Tags:
    Author Image

    About CodeFlare

    No comments

    Subscribe to: Post Comments ( Atom )

    Post Top Ad

    Author Details

    Informasi unik dan menarik seputar dunia blogging, SEO, template blogger, landing page blog, bisnis online, affiliasi, tips & trik, tutorial, widget dan coding.

    Pusat utama bagi para penggemar dan pencipta konten yang ingin berprestasi dalam dunia kreasi konten online yang terus berkembang.

    Codeflare bukan sekadar blog melainkan tempat bermain dinamis yang mampu beradaptasi untuk berkontribusi dalam arus informasi.

    Post Bottom Ad