Button CSS Hover Style For Blog

Pada kesempatan kali ini taukahbahwa.blogspot.com akan menyampaikan posting tentang Button CSS Hover Style For Blog. Semoga dengan berita Button CSS Hover Style For Blog akan menambah wawasan bagi anda pembaca setia taukahbahwa.blogspot.com

 

 

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/AVvXsEglTdf9jFjQCEmJglV2hZfDd0Yx_Aof-K1CJ7S5dM4fKo_jawrikWRR2TNyToCBsjQC9RnMD1TiQbQiRhG0KI91pZuPTCsqHJc1Jcyt40vkFZ8kLwVr5v-CN75Y8uP0Z-2k__24JYyNIb0/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.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com