Cool CSS Buttons With Pseudo-Elements For Blogger

We all know the power and beauty of CSS.We can design any page very easily with CSS.Yesterday I gave a tutorial about Adding jQuery tooltips to Blogger in that post also I have used the CSS.Today I am giving you cool and pure CSS button with Pseudo Elements.The designs was created by tympanus.net and customized them little much.

View Demo 

How To These Buttons To Blogger ?

For better understanding I have devided this post in two parts and they are as below

1. Adding The Css
2. Showing Them In Blogger Posts.

1.Adding The CSS

1. First Go to Blogger Dashboard > Design > Edit HTML.
2. Now find ]]></b:skin> tag in template.
3. Paste below code just above/before ]]></b:skin>.

.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/AVvXsEj_Gzqu9o1zbuc1qKToe-HlXfKRPH1giHLh_QYAxaFl2XMDBVGYSmb29MvMxbRIyJu2Rkl9cwch1URuo6ds8-u9JRunThUMXVA9-e-MAsajAnkDQGMUI0vthr3bnI8PkGxQYbkarNOVZe8/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 have successfully added the CSS code now lets see about the HTML Code.

2.Showing These Buttons In Blogger Posts

If you want to show these buttons in Blogger posts then follow below code.

<a href="YOUR LINK HERE" class="hb-buttons">TEXT YOU WANT TO SHOW ON BUTTON</a>

• Now add your link replacing YOUR LINK HERE.
• Add the text you want to show replacing TEXT YOU WANT TO SHOW ON BUTTON.