Tombol Download Animasi CSS (Nama + Ukuran File)

Ini adalah salah satu  Tutorial Blogger, kali ini saya akan membagikan apa yang telah saya coba 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=&#39;#00b7ea&#39;,endColorstr=&#39;#009ec3&#39;,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=&#39;#00b7ea&#39;,endColorstr=&#39;#009ec3&#39;,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 File yg akan didownload" target="_blank">Download</a>

<div class="slide top">

Nama jenis file (Document atau Drawing)</div>

<div class="slide bottom">

Size : Besarnya file 1585 KB</div>

</div>

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

Buat rekan-rekan bisa coba kalau ingin tahu hasilnya.....

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