Button CSS Hover Style For Blog

Salam semuanya,jumpa lagi sama saya hansmjlkcommunity,dalam pembahasan kemarin saya sempat membuat artikel tentang membuat icon button multy guna dengan css dan juga expandable button css,kini giliran membuat Button CSS Hover Style For blogmemang banyak tampilan button yang bisa sobat gunakan oleh karena itu sekarang saya buat lagi artikel tentang button,untukjelasnya bisa lihat demonya.

Demo

Gimana tertarik untuk mencobanya,silahkan ikuti tutorialnya di bawah ini.

1. Pastikan sobat dalam keadaan login.

2. Pilih menu Template > Edit HTML,centang Expand Widget Templates.

3. Cari kode ]]></b:skin> dan letakan kode di bawah tepat di atasnya.

.hb-buttons{
background-color:#4b3f39;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.hb-buttons:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.hb-buttons:before {
background-color:#322620;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1KTMX-Y-bhZT6I4nN1i-3DDJUhv-0EA9LFT6gyLxy0_e9gq9EeMuWAwqjPhwBk9XGS4dXg7zSDEGMVtJERdG0sffbawLXEk86IOJrIvBiUxhqzkQOiNjsp-4nA6I66AtoNCOgrRklV5E/h80/
helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.hb-buttons:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

4.Kemudian save.


Untuk pemakaiannya gunakan kode di bawah dan letakan dalam kolom HTML bukan Compase

<a href="YOUR LINK " class="hb-buttons">Button name</a>

Keterangan :

Letakan link pada kata berwarna merah
Letakan nama Button sesuai kebutuhan pada kata berwarna hijau


Demikian tutorial kali ini semoga bermanpaat.