Cara Membuat Tombol Download Responsive

Cara membuat tombol downlod keren (Animasi)

Cara Membuat Tombol Download slide Responsive

Tombol download.mungkin bagi sebagian bloger tombol ini gak begitu penting.tapi tak apalah mungkin buat kalian yang mau bikin bloger downloader mungkin post kali ini bisa jadi Alternarif buat mempercantik tampilan blog kalian.

Tombol blog yang akan kita buat ini mempunyai tampilan animasi yang menarik dalam keadaan pasif hanya terlihat tombol biasa namun saat kita dekatkan crosur sisi atas dan bawah tombol ini akan muncul secara slid memberikan informasi file dan ukuran.

oke langsung saja kita liat caranya

Pertama masuk  Bloger  Pilih Template Edit HTML kemudian klik CTRL+F pastekan dan cari code ]]></b:skin>

Pastekan code di bawaini di atas code ]]></b:skin>

 

Code </> "Tombol Download Keren"

/* DLBUTTON [Personal Change] */ .dlbutton br {display: none !important;} .dlbutton { margin: 0px auto; width: 200px; position: relative; z-index: 1; } .dlbutton a { color: white !important; display: block; width: 200px; height: 50px; background: #2DA5C6; text-align: center; text-decoration: none; text-transform: uppercase; font: 17px/50px Helvetica, Verdana, sans-serif; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); } .dlbutton a, .slide { -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); } .slide { position: absolute; z-index: -1; display: block; margin: -50px 0 0 10px; width: 180px; height: 40px; background: #444; color: #fff; text-align: center; font: 12px/45px Helvetica, Verdana, sans-serif; -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; transition: margin 0.5s ease; } .dlbutton:hover .bottom { margin: -10px 0 0 10px; } .dlbutton:hover .top { margin: -80px 0 0 10px; line-height: 35px; } .dlbutton a:active { background: #00b7ea; background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); } .dlbutton:active .bottom { margin: -20px 0 0 10px; } .dlbutton:active .top { margin: -70px 0 0 10px; }

Kalau sudah pilih save Kemudian pilih di mana tombol mau di letakan masukan code berikut.

Code </> "Tombol Download Keren"

<div class="dlbutton"><a href="#Link anda" target="_blank">Download</a><div class="slide top">Nama_File anda</div><div class="slide bottom">Size file anda</div></div>

save Dan lihat hasilnya
-Ganti tulisan
-Link anda dengan URL download kalian
-Nama_File.rar anda ganti Nama file download kalian \
-Size File anda Ganti ukuran File download kalian
Contoh demo