font-family: helvetica, arial, sans-serif;
font-size:14px;
letter-spacing: 1px;
text-transform: capitalize;
line-height:30px;
height:30px;
color:#fff;
cursor:pointer;
display: inline-block;
width:auto;
text-decoration:none !important;position: static;
/* these rules for the button press effect */
padding-top:1px;
padding-bottom:2px;margin-top:-1px;
margin-bottom:1px;padding-left:10px;
padding-right:10px;margin-left:-1px;
margin-right:1px;
/* default background-color */
background-color: #4432A5;
/* the mighty gradient */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.6)), color-stop(0.49, rgba(255, 255, 255, 0.3)), color-stop(0.51, rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.2))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Chrome10+,Safari5.1+ */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* FF3.6+ */
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Opera11.10+ */
background-image: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* W3C */
/* some nice roundy corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
/* for links in chrome */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* a very subtle drop-shadow that ehances the pressed button effect */
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30);
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30);
/* remove any inherited or default borders – especially important for the <button> element*/
border: 0 !important;
/* a subtle text inset effect which will also help to enhance the pressed button effect */
text-shadow: rgba(255, 255, 255, 0.1) -1px 0, rgba(0, 0, 0, 0.3) 1px 1px;
/* and of course a little animated background-color fade effect */
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
/* submit and reset buttons */
input.glossy-button{
vertical-align: middle;
line-height: normal !important;
padding-bottom: 0;
}
/* remove ugly dotted border */
:focus{
outline:none;
}
::-moz-focus-inner{
border:0;
}
/* the colors */
.pinkish:hover{
background-color: #Ff3366;
}
.lime:hover{
background-color: #59b606;
}
.blue:hover{
background-color: #027bbf;
}
.coffee:hover{
background-color: #832f02;
}
.strawberry:hover{
background-color: #f92020;
}
.dark:hover{
background-color: #000000;
}
/* when pressed */
button:active, .glossy-button:active{
background-color: #4432A5;
border-color: #333333;
color:#eeeeee;
padding-top:0;
padding-bottom:0;
margin-top:0;
margin-bottom:0;
padding-left:10px;
padding-right:10px;
margin-left:0;
margin-right:0;
box-shadow: none;
text-shadow: rgba(0, 0, 0, 0.4) 0 -1px, rgba(255, 255, 255, 0.3) 0 1px;
color:rgba(255, 255, 255, 0.9);
}
.ie9 button:active{
padding-top:0;
padding-bottom:2px;
margin-top:-1px;
margin-bottom:0;
padding-left:10px;
padding-right:10px;
margin-left:-1px;
margin-right:0;
border-top:1px solid white !important;
border-left:1px solid white !important;
height:31px;
border-radius: 5px;
}
.ie button, .ie .glossy-button {
background-image:url(images/butt-bg_slither.png);
background-repeat: repeat-x;
background-position:center center;
}
.ie8 button, .ie8 .glossy-button {
border:1px solid #ccc !important;
height:32px;
}
.ie7 button{
height:31px;
}
.ie7 .glossy-button{
height:28px;
}
.ie7 .glossy-button:active{
padding-bottom: 2px;
}
Try My Code 