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 and customized them little much.

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

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

Posted on February 23, 2012, in blogger and tagged , , , , . Bookmark the permalink. 3 Comments.

  1. Olá? Considerei bastante aplausível seu website, e resolvi escrever esse recado! Muito bem por isso, e continue com sucesso!

  2. Hello Webmaster, I noticed that is ranking pretty low on Google and has a low Google PageRank. Now the Google PageRank is how Google is able to see how relevant your webpage is compared to all the other webpages online, if you cannot rank high at the top of Google, then you will NOT get the traffic you need. Now usually trying to get to the top of Google costs hundreds if not thousands of dollars and very highly optimized targeted marketing campaigns that takes a team of experts months to achieve. However, we can show you how to get to the top of Google with no out of pocket expenses (free traffic), no stupid ninja tricks, no silly mind control techniques, and this will be all white hat with no blackhat software or tactics that could possibly land you on bad terms with Google and put you in the dreaded “Google Sandbox”. We’ll show you how to easily capture all the targeted traffic you need, for free, multiple ways to land fast (not months) first-page rankings in Google and other major search engines (Bing, Yahoo, Ask, etc), even show you strategies on how to earn daily commissions just try Ranking Top of Google, please check out our 5 minute video.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: