Cara Buat Tombol Download Efek Animasi CSS3 Blogger

Menyertakan tombol download pada sebuah artikel/postingan merupakan salah satu cara agar mempermudah para pembaca maupun pengunjung blog untuk menemukan file download yang mereka cari-cari sehingga kepuasan akan mereka rasakan ketika berada didalam suatu halaman blog. Kebanyakan blog-blog yang ada menurut pengamatan saya memiliki tombol download yang biasa saja dan terkadang hanya menampilkan Link saja dengan berbagai macam alasan yaitu lebih menyukai tampilan tombol download yang sederhana.

Untuk membuat dan memasang tombol download kita bisa membuatnya menggunakan CSS3 yang dimana dari segi tampilan akan sangat jauh lebih menarik daripada menggunakan Html biasa. Menggunakan CSS3 akan memberikan efek animasi ketika tombol download di tekan maupun ketika kursor di arahkan ke tombol download tersebut. Pada postingan ini saya akan memberikan tips bagaimana cara membuat tombol download menggunakan CSS3 tersebut yang tentunya ada efek animasinya.

Selain terdapat efek animasi, pada tombol download yang akan saya bagikan ini akan menampilkan ukuran file serta ekstensi file. Cara membuatnya cukuplah mudah, kalian tidak perlu susah payah belajar CSS3 karna dengan mengikuti tutorial singkat dibawah ini kalian akan mampu membuat tombol download CSS3 dengan animasi.

• Live Demo Tampilan Tombol Download > (DEMO)

Cara Membuat Tombol Download Dengan CSS3 :

• Masuk ke pengeditan TEMA blog kalian.

• Pastekan kode dibawah ini tepat di atas kode </body> atau  &lt;!--</body>--&gt;&lt;/body&gt;

<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}
  /* CSS3 Button */
.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  /*GRADIENT*/
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>

• Masukan kode berikut ini kedalam mode HTML postingan.

<div class="abt-button">
      <a href="#">Download</a>
      <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
    </div> 

 Pada tulisan berwarna kuning di atas kalian bisa menyesuaikan :

• #  = Kalian ganti dengan url file.
• 1.2MB = Ganti dengan ukuran file.
• zip = Ganti dengan ekstensi file.

Share this post

Related Posts