Tombol Download Sederhana dengan CSS

Cara Membuat Tombol Download dengan CSS - Mungkin Anda sudah tidak asing lagi mendengar tombol download seperti tombol download otomatis, tombol download dengan gambar, kali ini aak akan menghadirkan tombol download sederhana dengan CSS.

Tombol download ini memiliki efek hover, ketika tombol dihover maka background akan berubahh warna. untuk demonya seperti tombol demo dibawah ini :

Download

Download

Bagaimana Anda tertarik, Pemasangannya pun cukup sederhana. Berikut ini langkah-langkahnya :

1. Login keakun blogger
2. Pilih Template, lalu klik Edit HTML
3. Dengan menggunakan CTRL+F anda cari kode ]]></b:skin>
4. Kemudian copy kode dibawah ini dan pastekan diatasnya

.download {
border: 0;
font-size: 13px;
font-weight: 400;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
line-height: 1.4;
font-style: normal;
}
.download {
border: 1px solid #549dd4;
border-bottom-color: #4b8cbe;
height:70px;
width:100px;
box-shadow: 1px 1px 1px #aaa;
background: #5FAAE3;
color: #fff!important;
text-align: center;
text-shadow: 0 0 1px rgba(0,0,0,0.3);
-webkit-text-shadow: 0 0 1px rgba(0,0,0,0.3);
-moz-text-shadow: 0 0 1px rgba(0,0,0,0.3);
-ms-text-shadow: 0 0 1px rgba(0,0,0,0.3);
transition: background-color 1s ease-out 0;
-moz-transition: background-color 1s ease-out 0;
-webkit-transition: background-color 1s ease-out 0;
-o-transition: background-color 1s ease-out 0;
padding: 7px 10px!important;
}
.download : hover {
background: #454242;
text-shadow: 0 0 1px #222;
-moz-text-shadow: 0 0 1px #222;
-webkit-text-shadow: 0 0 1px #222;
-ms-text-shadow: 0 0 1px #222;
}

5. Simpan Template
6. Selanjutnya menuju laman baru kemduian terapkan kode dibawah ini pada Mode HTML

<div class="download">
<a href="http://www.aak-share.com/" target="_blank">Download</a>
</div>

7. Publikasikan

Semoga bermanfaat!

Subscribe to receive free email updates: