Skip to main content

Add Stylish Buttons inside Blogger Posts – using CSS3

beautiful buttons for blogger using css3You 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>




Labels:

Comments

Post a Comment

Popular posts from this blog

Automatic Read More With Thumbnails for Blogger

Blogger gives us an option to add jump break to posts. It enables us to display a a short summary of the post on the homepage of our blog with a link to the full post. Most of us add jump break to our posts, because displaying a short summary instead of the full post on the main page has many advantages. The main reason is that it increases page views and the visitors can easily get a selection of your posts.
Post a Comment
Read more

Getting to know Blogger's Post Editor - Beginner's Guide

Blogger provides us with a simple and clean post editor, which can be used by anyone with ease. It is simple and equally efficient at the same time. Comparing with WordPress post editor, one will miss a lot of buttons. But using Blogger's post editor will prove you that those missing buttons were useless. Blogger'a post editor has not too many format options, but has everything one needs. I'm quite sure that even a beginner won't find the editor confusing. But what if someone (a starter) needs to know what exactly each buttons stands for before beginning to use it. This post is for them and only for them.(i know no one else will stop to read this post)
Post a Comment
Read more

Responsive Recent Posts Slider Widget for Blogger

Here is one amazing responsive featured post slider for your blogs. This slider is Here i am with a fully automated featured posts slider for blogger blogs. This widget features a complete responsive design and is coded to fetch the most recent posts automatically from your blog. Yes i said fully automated, you only need to add your blog url in the code.
3 comments
Read more