Cara Membuat Tombol Download Keren dengan CSS

Renovasi Otak: Membuat Tombol Download Keren di Blog. Bagi blog yang berisi tentang berbagi file, pasti menyediakan link download pada artikel yang dibuat. Untuk membuat link tersebut menjadi menarik, alangkah baiknya kalian menggantinya dengan tombol download berikut agar terlihat lebih profesional.

Baca Juga: Cara Mengubah Desain Table dengan CSS

Pada kesempatan kali ini, admin akan berbagi tutorial membuat tombol download elegan dengan css. Dengan tampilan yang simple dan keren, pastinya akan membuat pelanggan setia anda tertarik untuk mendownloadnya.

Untuk tutorial membuatnya, kalian tinggal ikuti langkah demi langkah dibawah ini.

Cara Membuat Tombol Download di Blogger

Login ke akun Blogger kalian

Masuk ke menu  Template  ➤  Edit HTML 

Letakkan kode CSS dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>

/* DOWNLOAD BUTTON */
.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: #00897B;
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: #004D40;
background: -moz-linear-gradient(top, #00695C 36%, #0e6578 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00695C), color-stop(100%,#0e6578));
background: -webkit-linear-gradient(top, #00695C 36%,#0e6578 100%);
background: -o-linear-gradient(top, #00695C 36%,#0e6578 100%);
background: -ms-linear-gradient(top, #00695C 36%,#0e6578 100%);
background: linear-gradient(top, #4DB6AC 36%,#0e6578 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00695C', endColorstr='black',GradientType=0 );
}
.dlbutton:active .bottom {
margin: -20px 0 0 10px;
}
.dlbutton:active .top {
margin: -70px 0 0 10px;
}

Sampai disini tombol download sudah bisa dipakai. Untuk cara memakainya gunakan kode dibawah ini:

<div class="dlbutton">
<a href="https://renovasi-otak.blogspot.com" target="_blank">Download</a><br />
<div class="slide top">Aplikasi</div>
<div class="slide bottom">Size : 40 MB</div>
</div>

Hasilnya akan seperti ini:

Download

Cukup mudah bukan? ya, itulah cara membuat tombol download keren. Semoga bermanfaat.