Membuat Tombol Demo/Download Dengan CSS

Assalamu'alaikum Wr. Wb.

Halo semua! Sebenarnya Postingan ini enggak hanya diperuntukkan bagi orang-orang yang pengen membuat tombol download atau demo yang biasanya untuk Blog yang menampilkan Template Gratis. Tombol ini bisa di modifikasi tulisannya sesuai yang anda inginkan. Bagaimana Caranya? Oke Langsung Check This One!

• Silahkan Anda Login ke Akun Blogger Anda. 
• Masuk ke Template dan Klik Edit HTML.
• Cari Kode ]]></b:skin> (permudah mencari dengan F3 atau Ctrl + F)
• Copy Kode CSS Berikut diatasnya kode  ]]></b:skin>

.tombol a{ 
background-color: #222; 
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
background-image: -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
background-image: -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
background-image: -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
background-image: linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
border: 1px solid #111; 
color: #c6c6c6; 
float: left; 
font: bold 14px/30px sans-serif; 
height: 30px; 
margin: 10px 20px; 
padding: 0 15px; 
position: relative; 
text-decoration: none; 
text-shadow: 0 -1px 1px hsla(0,0%,0%,.8); 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
-webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
-moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
} 
.tombol a:hover, .tombol a:focus { 
background-color: #242424; 
color: #f6f6f6; 
-webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
-moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
} 
.tombol a:hover:after, .tombol a:focus:after { 
background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-image: -moz-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-image: -ms-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-image: -o-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-image: linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-position: 50% 0%; 
background-size: 200% 200%; 
content: ''; 
display: none; 
height: 1px; 
left: 0; 
position: absolute; 
right: 0; 
top: 0; 
} 
.tombol a:hover:after, .tombol a:focus:after { 
display: block; 
} 
.tombol a:before { 
background: #363636; bottom: -8px; content: ''; 
left: -8px; 
position: absolute; 
right: -8px; 
top: -8px; 
z-index: -1; 
-webkit-border-radius: 6px; -moz-border-radius: 6px; 
border-radius: 6px; 
-webkit-box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2); 
-moz-box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2); 
box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2); 
} 
.tombol a:active { 
background-color: #202020; color: #b6b6b6; 
line-height: 32px; 
-webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8); 
-moz-box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8); 
box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8); 
} 
.tombol a:active:after { 
display: block; 
left: 1px; 
opacity: .5; 
right: 1px; 
top: 31px; 
}

• Klik Save

Attention : Bagi Anda yang sudah Mengerti mengenai Kode diatas anda bisa mengeditnya sesuka hati, untuk Generator Warna Silahkan Anda Klik Link Berikut Generator Kode Warna

Langkah Penambahan Tombol.

Anda bisa Memasukannya ke Editor Postingan memakai HTML atau di Gadget HTML/JavaScript

Berikut Kodenya.

<div class="tombol">
<a href="#" target="_blank">Keterangan</a></div>

Keterangan Kode :

• # = Ganti dengan Url Yang Anda Inginkan
• Keterangan = Ganti dengan Tulisan yang Anda Mau

Dan Akan Jadi Seperti Ini     Keterangan

Sumber