Thursday, 22 August 2013

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://lh3.googleusercontent.com/-LtgkrgnPcmI/TzzVm8tvg7I/AAAAAAAAA4Y/SO04mp9dcts/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.

No comments:

Post a comment

Silahkan Komen Rider,