Hover Style CSS Buttons for Your Blogger Blog


Best Movies Sites: TOP 10 MOVIE WEBSITES


css buttons for blogspot blog
On previous days I had shared about a post about adding beautiful CSS buttons to your blogspot blog. But at this time we are sharing another cool CSS button set. It includes cool hover style as well as stylish shadow effect which will attract your blog readers. Whats more it looks more professional. Now lets go to the the tutorial and see how to add and use them. 

Before we go to the trick, please take look at the demo image screenshot shown below which I have taken from my demo blog. Click on the below pic (ie, your CSS buttons seem as below ▼ image screenshot)


Hover Style CSS Buttons for Your Blogger Blog 

NB: Your button's text color will change according to your blog link color

Question mark icon How to add this CSS buttons to your blog post
Its a Cool CSS button. It includes cool hover style. You can add this button any where in your blog/blog post with below code. Follow these following steps to add it to your blog.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.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;
}

Save your template. Use the following ▼ HTML code snippet to add this button to your blog/blog post.

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

If you wanna add more buttons with different links and your own text replace YOUR LINK With your URL and replace Button name With Your desired name. The width of this buttons will be adjust automatically.