How to Add Beautiful CSS3 Buttons To Blogger Blog

Today, I want to share tutorial about beautiful CSS3 buttons for your blogger blog.This CSS3 button set contains 6 different colors of buttons (Pink, Green, Blue, Red, Orange and Yellow) and 2 sizes (large and medium). You can add this simple CSS code in your blog easily. This tutorial will guide you "How to Add Beautiful CSS3 Buttons To Blogger Blog". 

These buttons will not get your blog load time.They load fast on blogger blogs. Let's start work on this tutorial.

Beautiful CSS3 Buttons Demo Below

How to Add Beautiful CSS3 Buttons To Blogger Blog

• Go to Blogger Dashboard > Template > Backup First
• Click On Edit HTML 
• Click On Proceed button 
• Find Below Code

]]></b:skin>

• Add Below Code Just Above It

.button, .button:visited {
 background: #222 url(http://bit.ly/MKreRz) 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;
}

• Now,Save Your Blog Template 

How To Use These Buttons?

HTML Codes For All Buttons Given Below. Just Follow The Steps For Add These Buttons

• Go to New Post In Blogger Blog
• When Editing Post Click On Edit HTML Tab 
• Choose Your Button Style Code Below and Paste It 
• Replace Links and Link Names With Your Own Links

1. HTML Code Large Buttons -

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

2. HTML Code Medium Buttons -

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

• Replace LINK HERE With Your Own Link 
• Replace BUTTON TEXT HERE With The Your Own Text

I hope you enjoyed this CSS3 buttons tutorial.Suggestions and comments are welcome.