Create a Multi Color and Size CSS3 Buttons

Today we are going to create some CSS3 Buttons which are available in multi color and size. There are lots of tutorials on creating css3 buttons over internet, But we have created our own css3 buttons for our various wordpress themes which we sold on wordpress marketplaces, so we thought why not to share that buttons with you guyz. So lets follow the steps for creating css3 buttons.

First of all we need to have a simple HTML mark up for our button, here we need to define the class for our link.. like the main class as button then the size class as small, medium or large and then the color class as red, blue, green etc etc.

<a class="button small red" href="#"><span>Button</span></a>

Now as we have completed with the markup, now we need to have our css3 codes to style our buttons, so first of all we need to style our buttons padding, hover effect, gradient effect and active effect. So lets follow the below codes to get the clear idea about it. I dont want to go into the details of css codes coz i know its simple to follow just by seeing into it. So just Check out the below css3 codes.

.button, .button span {
 display: inline-block;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
}
.button {
 white-space: nowrap;
 line-height:1em;
 position:relative;
 outline: none;
 overflow: visible; /* removes extra side padding in IE */
 cursor: pointer;
 border: 1px solid #999;/* IE */
 border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
 border-bottom:rgba(0, 0, 0, .4) 1px solid;
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
 box-shadow: 0 1px 2px rgba(0,0,0,.2);
 background: -moz-linear-gradient(
  center top,
  rgba(255, 255, 255, .1) 0%,
  rgba(0, 0, 0, .1) 100%
 );/* FF3.6 */
 background: -webkit-gradient(
  linear,
  center bottom,
  center top,
  from(rgba(0, 0, 0, .1)),
  to(rgba(255, 255, 255, .1))
 );/* Saf4+, Chrome */
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', 

EndColorStr='#19000000'); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient

(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
 -moz-user-select: none;
 -webkit-user-select:none;
 -khtml-user-select: none;
 user-select: none;
 margin-bottom:10px;
}
.button.full, .button.full span {
 display: block;
}
.button:hover, .button.hover {
 background: -moz-linear-gradient(
  center top,
  rgba(255, 255, 255, .2) 0%,
  rgba(255, 255, 255, .1) 100%
 );/* FF3.6 */
 background: -webkit-gradient(
  linear,
  center bottom,
  center top,
  from(rgba(255, 255, 255, .1)),
  to(rgba(255, 255, 255, .2))
 );/* Saf4+, Chrome */
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', 

EndColorStr='#19FFFFFF'); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient

(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}
.button:active, .button.active {
 top:1px;
}
.button span {
 position: relative;
 color:#fff;
 text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
 border-top: rgba(255, 255, 255, .2) 1px solid;
 padding:0.6em 1.3em;
 line-height:1em;
 text-decoration:none;
 text-align:center;
 white-space: nowrap;
}

Now we need to style for the different size of buttons.. so lets follow the below codes for different sizes of buttons.

.button.small span {
 font-size:12px;
}
.button.medium span {
 font-size:14px;
}
.button.large span {
 font-size:18px;
}

Now the styles for different color buttons..

.button.black {
 background-color: #333333;
}
.button.gray {
 background-color: #666666;
}
.button.white {
 background-color: #FFFFFF;
}
.button.white span{
 color: #666666;
}
.button.red {
 background-color: #e62727;
}
.button.orange {
 background-color: #ff5c00;
}
.button.magenta {
 background-color: #A9014B;
}
.button.yellow {
 background-color: #ffb515;
}
.button.blue {
 background-color: #00ADEE;
}
.button.pink {
 background-color: #e22092;
}
.button.green {
 background-color: #91bd09;
}
.button.rosy {
 background-color: #F16C7C;
}
.button.brown {
 background-color: #804000;
}
.button.purple {
 background-color: #800080;
}
.button.cyan {
 background-color: #46C7C7;
}
.button.gold {
 background-color: #D4A017;
}