Tombol CSS Hijau dengan Efek Hover Biru

Pada postingan sebelumnya saya sudah posting script untuk tombol CSS transparant dengan efek hover putih. Pada kali ini saya akan memberikan script untuk membuat tombol CSS dengan warna hijau dan efek hover biru. Langsung saja anda salin kode css berikut dan letakkan di atas kode ]]></b:skin> 

.button {
cursor:pointer;
border:6px double #3f5691;
background-color:#48b337;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#2d7535', endColorstr='#48b337');
background-image:-webkit-linear-gradient(bottom, #2d7535 14%, #61855e 46%, #48b337 100%);
background-image:-moz-linear-gradient(bottom, #2d7535 14%, #61855e 46%, #48b337 100%);
background-image:-ms-linear-gradient(bottom, #2d7535 14%, #61855e 46%, #48b337 100%);
background-image:-o-linear-gradient(bottom, #2d7535 14%, #61855e 46%, #48b337 100%);
background-image:linear-gradient(bottom, #2d7535 14%, #61855e 46%, #48b337 100%);
padding:13px 26px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), -1px 2px 20px #515151;
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), -1px 2px 20px #515151;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), -1px 2px 20px #515151;
text-shadow:0px 1px 0px rgba(255,255,255,0.3);
color:#ffffff;
font:normal 21px Georgia,Serif;
text-decoration:none;
outline:none;
vertical-align:middle;
}
.button:hover {
border-color:#0f2852;
background-color:#49579c;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#49579c', endColorstr='#142b70');
background-image:-webkit-linear-gradient(bottom, #49579c 52%, #1b3880 50%, #142b70 100%);
background-image:-moz-linear-gradient(bottom, #49579c 52%, #1b3880 50%, #142b70 100%);
background-image:-ms-linear-gradient(bottom, #49579c 52%, #1b3880 50%, #142b70 100%);
background-image:-o-linear-gradient(bottom, #49579c 52%, #1b3880 50%, #142b70 100%);
background-image:linear-gradient(bottom, #49579c 52%, #1b3880 50%, #142b70 100%);
color:#ffffff;
}
.button:active {
background-color:#142b70;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#142b70', endColorstr='#49579c');
background-image:-webkit-linear-gradient(bottom, #142b70, #49579c);
background-image:-moz-linear-gradient(bottom, #142b70, #49579c);
background-image:-ms-linear-gradient(bottom, #142b70, #49579c);
background-image:-o-linear-gradient(bottom, #142b70, #49579c);
background-image:linear-gradient(bottom, #142b70, #49579c);
}

Lalu untuk pemanggilannya letakkan kode di bawah ini pada widget blogger anda, dengan cara pilih => Elemen Laman =>Klik Tambah Gadget => Pilih HTML/JavaScript.

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

Kemudian jangan lupa klik simpan. script css di atas juga dapat di terapkan pada header, sidebar, ataupun footer pada blog anda.
Selesai, semoga bermanfaat. :D