Membuat Tombol Download CSS Custom Untuk Blog

41

Hai selemat datang dalam blog ejaelek kali ini saya akan membagikan cara membuat tombol download custom menggunakan CSS ya jadi tombol downloadnya nanti akan terlihat lebih menarik deh pastinya nanti anda akan menyukainnya dengan sedikit animasi tentunya agar terlihat lebih enak dipandang, dan nantinya tombol download ini dapat anda gunakan dalam website anda. Apalagi jika website tersebut adalah web download dan untuk itu anda harus menyimak baik baik tutorial kali ini. Untuk melihat demonya seperti ini.

DEMO

Pertama tama anda perlu mamasukkan code CSS berikut ini jika anda menggunakan blogger anda harus menaruhnya pada template blog anda, silahkan terlebih dahulu masuk ke dalam dashboard blogger anda, keudian buka pada menu tema jika berbahasa indonesia apabila masih dalam bahasa inggris namanya adalah template, selanjutkan klik pada Edit HTML.

Kemudian cari kode berikut ]]></b:skin> lalu tambahkan kode berikut ini diatas kode tersebut.

/* DLBUTTON [Personal Change] */
.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: #20B2AA;
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;
}

Setelah itu klik simpan jika sudah menambahkan kode CSS diatas. Untuk menampilkan tombol download tersebut masukkan kode berikut ini pada saat anda sedang menulis postingan dan ubah dari tampilan compose ke HTML.

<div class=”dlbutton”>
<a href=”#” target=”_blank” rel=”noopener”>Download</a>
<div class=”slide top”>Nama_File.rar</div>
<div class=”slide bottom”>Size : 1.5 MB</div>
</div>

Silahkan untuk mengubah tanda # dengan alamat download anda, dan ubah Nama_file.rar dengan nama dari file yang anda bagikan tersebut, Untuk 1.5 MB ganti juga dengan ukuran dari file anda bagikan. Anda juga dapat mengganti tulisan Download dengan keinginan anda sendiri.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini