Cara Membuat Tombol Download Animasi CSS (untuk download file dan software

 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

sumber: https://kodebloggerku.blogspot.com/2019/11/tombol-download-animasi-css-nama-file.html