Posted By

kdesilva on 07/04/12

Tagged

CSS3

Versions (?)

Last Edited at 07/04/12 04:40am

Statistics

Viewed 711 times

Favorited by 0 user(s)

Related snippets

Chunky CSS3 Button

/ Published in: CSS

not mine.

Highlighted TextExpand

.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;
}

URL: http://dimox.name/examples/beautiful-3d-buttons-using-css3/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.