Tombol Download Sederhana Dengan Css

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

Tombol download ini mempunyai efek hover, dikala tombol dihover maka background akan berubahh warna. untuk demonya menyerupai tombol demo dibawah ini :

Download

Download

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

1. Login keakun blogger
2. Pilih Template, kemudian klik Edit HTML
3. Dengan memakai CTRL+F anda cari kode ]]></b:skin>
4. Kemudian copy arahan 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 gres kemduian terapkan arahan dibawah ini pada Mode HTML

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

7. Publikasikan

Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/