Cara membuat tombol downlod keren (Animasi)
 |
| Cara membuat tombol downlod keren (Animasi) |
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 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
Terimakasih sebelumnya telah mengunjungi blog ini semoga bisa bermanfaat buat kalian semua.Mari kita budayakan post coment sebagai sarana bersilatuhrahmi walau tak saling kenal,walau tak saling dekat setidaknya kita bisa saling bertukarpikiran atau hanya sebatas support dalam postingan comment.Terimakasih semoga blog ini bisa lebih baik lagi kedepan.