Pure CSS3 Buttons for your Blog or Website

This time we are sharing cool CSS3 buttons set.This button set contains buttons of 6 different colors (pink,green,blue,red,orange and yellow) and 2 sizes (large and medium). You can add these buttons in 2 steps into your blog or Website, also the usage of the buttons are easy. You can add more colors if you know some css3. CSS3 buttons are really very use full for any blog or website cause they are load fast and does not impact on your load time. Now lets go to the the tutorial and see how to add them and use them.

The CSS3 code

.button, .button:visited {
 background-color: #222;
 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;
}

Add above css codes in your Theme Style Section. Now you have added the styles of buttons, lets see how to use them.

Usage of these Buttons

1. Large Buttons-

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

2. Medium Buttons-

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

Replace LINK HERE with link URL
Replace LINK TEXT HERE with the text which you want to appear on the button.