Button CSS Hover Style For Blog

 

 

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/AVvXsEhE4BvlOP3X96LYCoK9ueEKW9Y9qXtDKtB7IOEzNpjfWwfXINQ-tED36T8p1LJCdWFRhCahW8gyedVD3jR4mz6Au-eQcEaovO9_fPki9uP3CNjw9kfKTRdkNXBHbRbJHywnF6qs48ZFQKc/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.