Simple css button style

Simple css button style design

Simple css button style

a.button,input.button[type=submit]{border:0 solid;border-radius:4px 4px 4px 4px;box-shadow:0 1px 0 0 rgba(0,0,0,0.3);color:#FFFFFF;cursor:pointer;display:inline-block;font-family:Signika, Arial, sans-serif;font-weight:600;text-decoration:none;width:auto;margin-bottom:7px;padding:7px 20px;}
.button.blue,.blue .button{background:linear-gradient(tobottom,#52B3E80%,#28A1E2100%) repeat scroll 0 0 transparent;border-top:1px solid #7FC8EE;text-shadow:0 1px 2px #00509D;}
.button.blue:hover,.blue .button:hover{background:none repeat scroll 0 0 #27A0E1;}
.button.brown,.main-content .sfsearchSubmit{background:linear-gradient(tobottom,#D9BB950%,#CFAA7C100%) repeat scroll 0 0 transparent;border-top:1px solid #E3CDB2;text-shadow:0 1px 2px #926237;}
.button.brown:hover,.main-content .sfsearchSubmit:hover{background:none repeat scroll 0 0 #CFAA7C;}
.button.silver,.silver .button{background:linear-gradient(tobottom,#F2F2F20%,#EDEDED100%) repeat scroll 0 0 transparent;color:#27A0E1;text-shadow:0 1px 2px #FFFFFF;}
.button.silver:hover,.silver .button:hover{background:none repeat scroll 0 0 #EDEDED;}
.button.purple{background:linear-gradient(tobottom,#7B61910%,#664D7D100%) repeat scroll 0 0 transparent;border:1px solid #FFFFFF;}
.button.purple:hover{background:none repeat scroll 0 0 #664D7D;}
.button.green{background:linear-gradient(tobottom,#61916D0%,#517D4D100%) repeat scroll 0 0 rgba(0,0,0,0);border:1px solid #fff;}
.button.green:hover{background:none repeat scroll 0 0 #5A7D4D;}
.button.orrange{background:linear-gradient(tobottom,#F0AD4E0%,#EEA236100%) repeat scroll 0 0 rgba(0,0,0,0);border:1px solid #fff;}
.button.orrange:hover{background:none repeat scroll 0 0 #ED9C28;}
.button.red{background:linear-gradient(tobottom,#D9534F0%,#D43F3A100%) repeat scroll 0 0 rgba(0,0,0,0);border:1px solid #fff;}
.button.red:hover{background:none repeat scroll 0 0 #D2322D;}
.button.white{color:#333;background:linear-gradient(tobottom,#FFF0%,#CCC100%) repeat scroll 0 0 rgba(0,0,0,0);border:1px solid #999;}
.button.white:hover{background:none repeat scroll 0 0 #EBEBEB;}
Simple css button style Simple css button style Reviewed by Bhaumik Patel on 7:52 PM Rating: 5