CSS3 强大的 渐变功能 制作出 漂亮的 button 非常给力啊。

 

为什么这些按钮如此的酷?

  • 纯 CSS: 没有图片和Javascript的应用。
  • 渐变可以跨浏览器应用 (IE, Firefox 3.6, Chrome, and Safari).
  • 灵活和可扩展: 通过改变字体大小和填充值,按钮的大小和圆角可以调整。
  • 它有三个按钮状态: normal, hover 和 active。
  • 能被应用于任何HTML元素，比如a, input, button, span, div, p, h3, 等等。
  • 备注：如果CSS3不被支持，它将会显示成普通按钮 (没有渐变和阴影)。

参考代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS3 button </title>
<style>
a{margin-right:5px;}
.button {
	display:inline-block;
	outline:none;
	cursor:pointer;
	text-align:center;
	text-decoration:none;
	font:14px/100% Arial,Helvetica,sans-serif;
	padding:.5em 2em .55em;
	text-shadow:0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius:.5em;
	-moz-border-radius:.5em;
	border-radius:.5em;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
	box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration:none;
}
.button:active {
	position:relative;
	top:1px;
}
.orange {
	color:#fef4e9;
	border:solid 1px #da7c0c;
	background:#f78d1d;
	background:-webkit-gradient(linear,left top,left bottom,from(#faa51a),to(#f47a20));
	background:-moz-linear-gradient(top,#faa51a,#f47a20);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20');
}
.orange:hover {
	background:#f47c20;
	background:-webkit-gradient(linear,left top,left bottom,from(#f88e11),to(#f06015));
	background:-moz-linear-gradient(top,#f88e11,#f06015);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015');
}
.orange:active {
	color:#fcd3a5;
	background:-webkit-gradient(linear,left top,left bottom,from(#f47a20),to(#faa51a));
	background:-moz-linear-gradient(top,#f47a20,#faa51a);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');
}
.black {
	color:#fff;
	border:solid 1px #333;
	background:#616161;
	background:-webkit-gradient(linear,left top,left bottom,from(#616161),to(#050505));
	background:-moz-linear-gradient(top,#616161,#050505);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#616161',endColorstr='#050505');
}
.black:hover {
	background:#616161;
	background:-webkit-gradient(linear,left top,left bottom,from(#050505),to(#616161));
	background:-moz-linear-gradient(top,#050505,#616161);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#050505',endColorstr='#616161');
}
.black:active {
	color:#ccc;
	background:-webkit-gradient(linear,left top,left bottom,from(#616161),to(#050505));
	background:-moz-linear-gradient(top,#616161,#050505);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#616161',endColorstr='#050505');
}
.blue {
	color:#fff;
	border:solid 1px #007aa3;
	background:#0179ab;
	background:-webkit-gradient(linear,left top,left bottom,from(#02abf0),to(#0179ab));
	background:-moz-linear-gradient(top,#02abf0,#0179ab);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#02abf0',endColorstr='#0179ab');
}
.blue:hover {
	background:#0179ab;
	background:-webkit-gradient(linear,left top,left bottom,from(#0179ab),to(#02abf0));
	background:-moz-linear-gradient(top,#0179ab,#02abf0);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0179ab',endColorstr='#02abf0');
}
.blue:active {
	color:#ccc;
	background:-webkit-gradient(linear,left top,left bottom,from(#02abf0),to(#0179ab));
	background:-moz-linear-gradient(top,#02abf0,#0179ab);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#02abf0',endColorstr='#0179ab');
}
.white {
	color:#000;
	border:solid 1px #ccc;
	background:#fefefe;
	background:-webkit-gradient(linear,left top,left bottom,from(#fefefe),to(#eeeeee));
	background:-moz-linear-gradient(top,#fefefe,#eeeeee);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe',endColorstr='#eeeeee');
}
.white:hover {
	background:#eeeeee;
	background:-webkit-gradient(linear,left top,left bottom,from(#eeeeee),to(#fefefe));
	background:-moz-linear-gradient(top,#eeeeee,#fefefe);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#fefefe');
}
.white:active {
	color:#333;
	background:-webkit-gradient(linear,left top,left bottom,from(#fefefe),to(#eeeeee));
	background:-moz-linear-gradient(top,#fefefe,#eeeeee);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe',endColorstr='#eeeeee');
}
.green {
	color:#fff;
	border:solid 1px #598003;
	background:#7db315;
	background:-webkit-gradient(linear,left top,left bottom,from(#7db315),to(#577f02));
	background:-moz-linear-gradient(top,#7db315,#577f02);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db315',endColorstr='#577f02');
}
.green:hover {
	background:#577f02;
	background:-webkit-gradient(linear,left top,left bottom,from(#577f02),to(#7db315));
	background:-moz-linear-gradient(top,#577f02,#7db315);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#577f02',endColorstr='#7db315');
}
.green:active {
	color:#ccc;
	background:-webkit-gradient(linear,left top,left bottom,from(#7db315),to(#577f02));
	background:-moz-linear-gradient(top,#7db315,#577f02);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db315',endColorstr='#577f02');
}
.red {
	color:#fff;
	border:solid 1px #9a1510;
	background:#e8281b;
	background:-webkit-gradient(linear,left top,left bottom,from(#e8281b),to(#aa1a11));
	background:-moz-linear-gradient(top,#e8281b,#aa1a11);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8281b',endColorstr='#aa1a11');
}
.red:hover {
	background:#aa1a11;
	background:-webkit-gradient(linear,left top,left bottom,from(#aa1a11),to(#e8281b));
	background:-moz-linear-gradient(top,#aa1a11,#e8281b);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1a11',endColorstr='#e8281b');
}
.red:active {
	color:#ccc;
	background:-webkit-gradient(linear,left top,left bottom,from(#e8281b),to(#aa1a11));
	background:-moz-linear-gradient(top,#e8281b,#aa1a11);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8281b',endColorstr='#aa1a11');
}

</style>
</head>
<body>
<div style="padding:50px;">
	<a class="button black" href="javascript:;">Button</a><a class="button blue" href="javascript:;">Button</a><a class="button white" href="javascript:;">Button</a><br/><br/><a class="button green" href="javascript:;">Button</a><a class="button red" href="javascript:;">Button</a><a class="button orange" href="javascript:;">Button</a>
</div>
</body>
</html>