Tombol Transparant dengan Efek Hover Menyala

Setelah sekian lama saya tidak membuka blog, kali ini saya akan coba memberi cara atau memberikan script Css untuk tombol di blog dengan efek putih. Karena blog ini baru saya buat jadi saya akan mencoba menjelaskannya tidak terlalu banyak langsung saja.

Langkah pertama cari kode ]]></b:skin> lalu tempatkan kode di bawah ini tepat di atas kode ]]></b:skin>

. button {padding:6px 1px 1px 1px;
width:110px;
height:22px;
font:bold 14px Calibri,Arial,Sans-Serif;
text-shadow:0 1px 2px #000;
text-align:center;
color:#fff;
background:#222;
background:-webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.1) 51%);
background:-moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.1) 51%);
background:-ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.1) 51%);
background:-o-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.1) 51%);
background:linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.1) 51%);
border:1px solid #111;
margin-bottom:12px;
-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4), inset 0 0 2px rgba(255,255,255,0.8);
-moz-box-shadow:0 0 1px rgba(255,255,255,0.4), inset 0 0 2px rgba(255,255,255,0.8);
box-shadow:0 0 1px rgba(255,255,255,0.4), inset 0 0 2px rgba(255,255,255,0.8);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;}
. button :hover{
-webkit-box-shadow:0 0 1px rgba(255,255,255,0.5), inset 0 0 8px rgba(255,255,255,1);
-moz-box-shadow:0 0 1px rgba(255,255,255,0.5), inset 0 0 8px rgba(255,255,255,1);
box-shadow:0 0 1px rgba(255,255,255,0.5), inset 0 0 8px rgba(255,255,255,1);
}

Langkah selanjutnya untuk memanggilnya salin kode di bawah ini

<div class="button">
Button
</div>

Kode di atas dapat di letakkan di widget atau dapat diterapkan pada menu blog anda.
Sekian, semoga bermanfaat.