Cara Membuat Tombol Download Animasi CSS (Nama + Ukuran File)

Masih berkaitan dengan dunia Tutorial Blogger, kali ini saya akan menjelaskan tutorial bagaimana caranya membuat tombol Download di Blogger.

Yang menariknya adalah tombol Download ini menggunakan CSS animasi, disertai Nama dan Ukuran File.

Di atas adalah contoh tampilannya. Keren, kan? Pada saat Pointer atau Cursor Mouse diarahkan ke tombol tersebut, muncul Nama dan Ukuran File-nya.

Cara Membuat Tombol Download Animasi CSS (Nama + Ukuran File)

Blogger > Tema > Edit HTML

Simpan kode CSS di bawah ini, di atas kode </style> atau ]]></b:skin>

.dlbutton br{display:none!important}
.dlbutton{margin:0 auto;width:200px;position:relative;z-index:1;padding:25px}
.dlbutton a{color:white!important;display:block;width:200px;height:50px;background:#bd1a0b;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}

Sementara, ketuk tombol Save Template.

Jika ingin menampilkan tombol Download di dalam artikel / postingan blog, atribut HTML yang digunakan ada di bawah ini:

<div class="dlbutton">
<a href="Url tujuan di sini" target="_blank">Download</a>
<div class="slide top">
Nama-File-di-Sini.rar</div>
<div class="slide bottom">
Size : 1.9 GB</div>
</div>

Perhatikan: Ganti kode yang sudah ditandai, sesuai keinginan kalian masing-masing.

Demikian cara membuat dan memasang tombol Download dengan keterangan Nama dan Ukuran File, disertai animasi kode CSS di Blogger / Blogspot.*

Sumber: https://www.maringngerrang.com/2015/12/tombol-download-css.html