Button dengan Efek Hover keren

Pertama-tama masuklah ke halaman editor HTML Template Anda kemudian pilih Edit HTML dan klik Lanjutkan.
Temukan kode ini:
]]></b:skin>
Salin kode CSS ini dan letakkan di atasnya:

 .tombol{color:666;text-shadow:-1px 1px 0px #636363;font-size:0px;line-height:50px;text-align:center;margin:10px 0px;font-family: 'Electrolize', sans-serif;background:#919191 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VQzoJsgnR3RT4jPrAEwUYOsUYmdt4wKYSBwZYV0ailEARKHxXcsfkraXYrSuW4kfPVUKy_Ykk2tzGNE4o4029nF-wFE-JMQ7qczdjQUsDPUXGanNtCtwN1KaXKFPV7vv-w6vc0Mmi2I/s1600/pause.png)no-repeat left;border-radius:5px;width:50px; height:50px;white-space:nowrap;border:2px solid #ccc;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.tombol:hover{width:450px;text-shadow: 1px 1px 0px #A3A3A3;font-size:20px;background: #919191 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxW5A4u63DZC-XvRp42xIMq0l2L4P1pyOFgxYUPwh_rdknyaViwgEQVZ-Z6MO3hdVV2IQI9dvLzaanHb-CCPrPHBpgnmc8-plXmiRq1WKhEFYvZZgP6AFk62qoWjD306zatfaPJrlWkw/s1600/play.png)no-repeat left;} 

Klik Simpan Template.

MARKUP :

 <div align="center">
<div class="tombol">
<a href="http://hooter-spot.blogspot.com/">Demo</a></div>
</div> 

Check out this Pen!

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM