CSS3 Gradient Buttons

css3-gradient-buttons.css

.button {
	border:1px solid #1D4253;
	color:#FFFFFF;
	text-shadow:0 -1px 0 #004e68;
	font-size:12px;
	display:inline-block;
	margin:8px 0;
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	background-color:#007197;
	background-image:
	-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(0,93,124)),
		color-stop(1, rgb(0,136,181))
	);
	background-image:
	-moz-linear-gradient(
		center bottom,
		rgb(0,93,124) 0%,
		rgb(0,136,181) 100%
	);
	-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
	-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
}

.button:hover {
	background-color:#0081ab;
	background-image:
	-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(0,116,154)),
		color-stop(1, rgb(0,165,198))
	);
	background-image:
	-moz-linear-gradient(
		center bottom,
		rgb(0,116,154) 0%,
		rgb(0,165,198) 100%
	);
	text-decoration:none;
}

.button:active {
	background-color:#006486;
	background-image:
	-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(0,133,166)),
		color-stop(1, rgb(0,83,122))
	);
	background-image:
	-moz-linear-gradient(
		center bottom,
		rgb(0,133,166) 0%,
		rgb(0,83,122) 100%
	);
	-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
	box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
}

.button span {
	padding:8px 20px;
	border-top:1px solid #00B8D3;
	display:block;
	font-weight:bold;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;	
}

.button span:active { border-top-color:transparent; }