0 CSS3 Button

CSS3 Button

<style>
body { font-family: Arial, Helvetica, tahoma sans-serif; font-size:12px; line-height:1.6; color:#282828; }

.medium-button {
 background: #cccccc;
 background: -moz-linear-gradient(top, #cccccc 0%, #bbbbbb 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#bbbbbb));
 background: -webkit-linear-gradient(top, #cccccc 0%,#bbbbbb 100%);
 background: -o-linear-gradient(top, #cccccc 0%,#bbbbbb 100%);
 background: -ms-linear-gradient(top, #cccccc 0%,#bbbbbb 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#bbbbbb',GradientType=0 );
 background: linear-gradient(top, #cccccc 0%,#bbbbbb 100%);
 color: #FFF;
 cursor: pointer;
 font-size: 14px;
 font-weight: bold;
 padding: 8px 20px;
 overflow: visible;
 display: inline-block;
 text-decoration: none !important;
 text-shadow: 0 1px 0 rgba(0,0,0,0.4);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow:0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
 -moz-box-shadow:0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
 box-shadow:0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
}
.medium-button:hover {
 color:#fff;
 background: #bbbbbb;
 background: -moz-linear-gradient(top, #bbbbbb 0%, #cccccc 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#cccccc));
 background: -webkit-linear-gradient(top, #bbbbbb 0%,#cccccc 100%);
 background: -o-linear-gradient(top, #bbbbbb 0%,#cccccc 100%);
 background: -ms-linear-gradient(top, #bbbbbb 0%,#cccccc 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#cccccc',GradientType=0 );
 background: linear-gradient(top, #bbbbbb 0%,#cccccc 100%);
}
/* Gradient Colors */
.blue {
 background: #2e9fd8;
 background: -moz-linear-gradient(top, #2e9fd8 0%, #0c72a4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e9fd8), color-stop(100%,#0c72a4));
 background: -webkit-linear-gradient(top, #2e9fd8 0%,#0c72a4 100%);
 background: -o-linear-gradient(top, #2e9fd8 0%,#0c72a4 100%);
 background: -ms-linear-gradient(top, #2e9fd8 0%,#0c72a4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e9fd8', endColorstr='#0c72a4',GradientType=0 );
 background: linear-gradient(top, #2e9fd8 0%,#0c72a4 100%);
}
a.blue:hover {
 background: #0c72a4;
 background: -moz-linear-gradient(top, #0c72a4 0%, #2e9fd8 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c72a4), color-stop(100%,#2e9fd8));
 background: -webkit-linear-gradient(top, #0c72a4 0%,#2e9fd8 100%);
 background: -o-linear-gradient(top, #0c72a4 0%,#2e9fd8 100%);
 background: -ms-linear-gradient(top, #0c72a4 0%,#2e9fd8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c72a4', endColorstr='#2e9fd8',GradientType=0 );
 background: linear-gradient(top, #0c72a4 0%,#2e9fd8 100%);
}
.green {
 background: #b7df63;
 background: -moz-linear-gradient(top, #b7df63 0%, #74ab00 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7df63), color-stop(100%,#74ab00));
 background: -webkit-linear-gradient(top, #b7df63 0%,#74ab00 100%);
 background: -o-linear-gradient(top, #b7df63 0%,#74ab00 100%);
 background: -ms-linear-gradient(top, #b7df63 0%,#74ab00 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7df63', endColorstr='#74ab00',GradientType=0 );
 background: linear-gradient(top, #b7df63 0%,#74ab00 100%);
}
a.green:hover {
 background: #74ab00;
 background: -moz-linear-gradient(top, #74ab00 0%, #b7df63 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#74ab00), color-stop(100%,#b7df63));
 background: -webkit-linear-gradient(top, #74ab00 0%,#b7df63 100%);
 background: -o-linear-gradient(top, #74ab00 0%,#b7df63 100%);
 background: -ms-linear-gradient(top, #74ab00 0%,#b7df63 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#74ab00', endColorstr='#b7df63',GradientType=0 );
 background: linear-gradient(top, #74ab00 0%,#b7df63 100%);
}

.medium-button { color:#fff; text-shadow:0 1px 1px rgba(0, 0, 0, 0.4); font-weight:bold; text-transform:uppercase; font-size:12px;}
.yellow {
 background: #ffd700;
 background: -moz-linear-gradient(top, #ffd700 0%, #ffaf00 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd700), color-stop(100%,#ffaf00));
 background: -webkit-linear-gradient(top, #ffd700 0%,#ffaf00 100%);
 background: -o-linear-gradient(top, #ffd700 0%,#ffaf00 100%);
 background: -ms-linear-gradient(top, #ffd700 0%,#ffaf00 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd700', endColorstr='#ffaf00',GradientType=0 );
 background: linear-gradient(top, #ffd700 0%,#ffaf00 100%);
}
a.yellow:hover {
 background: #ffaf00;
 background: -moz-linear-gradient(top, #ffaf00 0%, #ffd700 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf00), color-stop(100%,#ffd700));
 background: -webkit-linear-gradient(top, #ffaf00 0%,#ffd700 100%);
 background: -o-linear-gradient(top, #ffaf00 0%,#ffd700 100%);
 background: -ms-linear-gradient(top, #ffaf00 0%,#ffd700 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf00', endColorstr='#ffd700',GradientType=0 );
 background: linear-gradient(top, #ffaf00 0%,#ffd700 100%);
}
.red{
 background: #d11313;
 background: -moz-linear-gradient(top, #d11313 0%, #a30a0a 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d11313), color-stop(100%,#a30a0a));
 background: -webkit-linear-gradient(top, #d11313 0%,#a30a0a 100%);
 background: -o-linear-gradient(top, #d11313 0%,#a30a0a 100%);
 background: -ms-linear-gradient(top, #d11313 0%,#a30a0a 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d11313', endColorstr='#a30a0a',GradientType=0 );
 background: linear-gradient(top, #d11313 0%,#a30a0a 100%);
}
a.red:hover  {
 background: #a30a0a;
 background: -moz-linear-gradient(top, #a30a0a 0%, #d11313 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a30a0a), color-stop(100%,#d11313));
 background: -webkit-linear-gradient(top, #a30a0a 0%,#d11313 100%);
 background: -o-linear-gradient(top, #a30a0a 0%,#d11313 100%);
 background: -ms-linear-gradient(top, #a30a0a 0%,#d11313 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a30a0a', endColorstr='#d11313',GradientType=0 );
 background: linear-gradient(top, #a30a0a 0%,#d11313 100%);
}
</style>

<a href="#" class="medium-button blue">Buy now!!</a>   <a href="#" class="medium-button green">Another action</a>
 <a href="#" class="medium-button yellow">Yellow Button</a>   <a href="#" class="medium-button red">Red Button</a>