Box dengan Hover

Silahkan Lihat Demo nya di Bagian bawah dari artikel kali ini!
Cara bikin nya :
1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tersebut :

 

=Codes

<style type="text/css">
#checkoutbutton {float:center; margin:0px;autowidth:0px; autoheight:0px;autoborder:none; overflow:hidden;width:540;height:auto;background:url(https://lh4.googleusercontent.com/-5TXWrk-7YMU/TVLs-Jq5taI/AAAAAAAABUE/z4u2QLnfF10/s1600/dreamstime_2582658.jpg);
-webkit-border-radius-topleft:5px;-webkit-border-radius-topright:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;
background:-moz-linear-gradient(top, #102707,lime, #102707);-moz-border-radius: 160px;
-moz-box-shadow: -2px -2px 20px lime;-webkit-box-shadow: -2px -2px 20px lime;
color:#fff;text-shadow: 1px 1px 2px #000; text-align:left;-moz-border-radius: 15px;-webkit-border-radius: 15px;border: 5px solid lime;-webkit-transform:scale(.5);-webkit-transition-timing-function:ease-in; -moz-transform:scale(.5);-moz-transition-timing-function:ease-in;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-webkit-box-shadow:4px 6px 4px lime; -moz-box-shadow: -2px -2px 20px lime; }
#checkoutbutton:hover {width:540px;height:auto;opacity: 0.8;-webkit-box-shadow:0px 0px 55px lime;-moz-box-shadow:0px 0px 55px lime;-webkit-transform:scale(1);-webkit-transition-timing function:ease-in;-webkit-transition-duration:500ms;-moz-transform:scale(1);-moz-transition-timing-function:ease-in;-moz-transition-duration:500ms}
</style>
<div id="checkoutbutton">
<b style="color: magenta;">Masukan Apa aja yg sobat ingin kan Di sini</b>&lt;/div&gt;

DEMO