This is Cool Css button. It include with cool hover style.you can add this button any where  in your blog with this code.Follow these steps to add it to your blog.




1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.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/AVvXsEgOZPhdnJk2PM3nkOW6zRIl7awAmhosMQe5ANIwuHc-nxLEYf1ZhQj94IH53xBkOqpsX01glNLFOGAKRT6SLs8_k0Z9vnjMPaQRqzmCcxico9MVF5K0x0aoO7fQemcifNXShORivXSk8-8/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;
}

Now you can save your Template.
When you want to add it to your blog. Use Like below

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

When you want to add button use above link and.
* Replace YOUR LINK With your URL
*Replace Button name With any name you want.


You have done , Cheers

Related Posts : blog, Blogging, Computer tricks