Himas Rafeek
Posted on: 2 years ago
CSS

Chunky CSS3 Button

not mine.


                                          .submit {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #5D7731;
    text-shadow: 1px 1px #D0E5A4;
    border: 1px solid #89A94D;
    border-top: 1px solid #AAD063;
    border-bottom: 1px solid #6D883B;
    box-shadow: 		inset 0 1px #E0EEB6, 		inset 1px 0 #C6E08D, 		inset -1px 0 #C6E08D, 		inset 0 -1px #B4D579, 		0 2px #799545, 		0 3px #6D883B, 		0 4px 2px rgba(0, 0, 0, 0.4)	;
    background: -moz-linear-gradient(top,  #cae285 0%, #a3cd5a 100%);
    /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cae285), color-stop(100%,#a3cd5a));
    /* Chrome,Safari4+ */	background: -webkit-linear-gradient(top,  #cae285 0%,#a3cd5a 100%);
    /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top,  #cae285 0%,#a3cd5a 100%);
    /* Opera 11.10+ */	background: -ms-linear-gradient(top,  #cae285 0%,#a3cd5a 100%);
    /* IE10+ */	background: linear-gradient(top,  #cae285 0%,#a3cd5a 100%);
    /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cae285', endColorstr='#a3cd5a',GradientType=0 );
    /* IE6-9 */	background-color: #B6D76F;
}
.submit::-moz-focus-inner {
    border: 0;
}
.submit:hover {
    border-top: 1px solid #98B85B;
    box-shadow: 		inset 0 1px #CCE3A1, 		inset 1px 0 #C6E08D, 		inset -1px 0 #C6E08D, 		inset 0 -1px #C7E18E, 		0 2px #799545, 		0 3px #6D883B, 		0 4px 2px rgba(0, 0, 0, 0.4)	;
    background: -moz-linear-gradient(top,  #abd164 0%, #b9d972 100%);
    /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abd164), color-stop(100%,#b9d972));
    /* Chrome,Safari4+ */	background: -webkit-linear-gradient(top,  #abd164 0%,#b9d972 100%);
    /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top,  #abd164 0%,#b9d972 100%);
    /* Opera 11.10+ */	background: -ms-linear-gradient(top,  #abd164 0%,#b9d972 100%);
    /* IE10+ */	background: linear-gradient(top,  #abd164 0%,#b9d972 100%);
    /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abd164', endColorstr='#b9d972',GradientType=0 );
    /* IE6-9 */	background-color: #B6D76F;
}
.submit:active {
    top: 3px;
    border: 1px solid #88A84E;
    border-top: 1px solid #6E883F;
    border-bottom: 1px solid #95B855;
    background: #A7CF5F;
    box-shadow: inset 0 1px 2px #779441;
}