Add Stylish Buttons inside Blogger Posts – using CSS3

You might have seen stylish push buttons in many blogs and wondered how can you add it to your blog. Yes, you can easily add this type buttons inside blog posts using css3.
Toady, I’m sharing  6 stylish buttons in 2 different sizes - Pink Button, Green Button, Blue Button, Red Button, Orange Button & Yellow Button. You can use these buttons in two different sizes – in large & medium.

And i must say that all due credits to this buttons belong to papermashup.com

SEE A LIVE DEMO OF THE BUTTONS BELOW

---

---

ADDING THE BUTTONS INSIDE YOUR POST

► At first,navigate to blogger > template > edit html
► now search for ]]></b:skin> and add the below code just above/before it.

.button, .button:visited { background: #222 url(https://dl.dropboxusercontent.com/s/z49pqczsfep4gc9/overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font-family: calibri; } .button:hover { background-color: #111; color: #fff; } .button:active { top: 1px; } .small.button, .small.button:visited { font-size: 11px } .button, .button:visited, .medium.button, .medium.button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .medium.button, .medium.button:visited { font-size: 14px; padding: 8px 14px 9px; } .large.button, .large.button:visited { font-size: 34px; padding: 8px 14px 9px; } .pink.button, .magenta.button:visited { background-color: #e22092; } .pink.button:hover { background-color: #c81e82; } .green.button, .green.button:visited { background-color: #91bd09; } .green.button:hover { background-color: #749a02; } .red.button, .red.button:visited { background-color: #e62727; } .red.button:hover { background-color: #cf2525; } .orange.button, .orange.button:visited { background-color: #ff5c00; } .orange.button:hover { background-color: #d45500; } .blue.button, .blue.button:visited { background-color: #2981e4; } .blue.button:hover { background-color: #2575cf; } .yellow.button, .yellow.button:visited { background-color: #ffb515; } .yellow.button:hover { background-color: #fc9200; }

So the first part is complete. And now to the second part, i.e., how  to use it inside your post? This part is done while you’re composing the post. You have to choose Edit HTML tab and paste the below code where you want the buttons to appear. Don’t forget to replace button text and corresponding link in the code.

Large Size Button Codes

<center><a href="YOUR LINK HERE" class="large button pink" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="large button blue" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="large button green" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="large button orange" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="large button red" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="large button yellow" >BUTTON TEXT</a></center>

Medium Size Button Codes

<center><a href="YOUR LINK HERE" class="medium button pink" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="medium button blue" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="medium button green" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="medium button orange" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="medium button red" >BUTTON TEXT</a></center>
<center><a href="YOUR LINK HERE" class="medium button yellow" >BUTTON TEXT</a></center>