CSS3 渐变按钮非常漂亮

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<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>

<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>

CSS3 渐变按钮非常漂亮

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

linux 下编译安装 json扩展包 php-json-ext-1.2.1.tar.bz2

【音乐】爱很简单-陶喆

发表评论点击这里取消回复。

热门标签

最新评论

热评文章

大家都在看

CSS3 渐变按钮 非常 漂亮

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

linux 下编译安装 json扩展包 php-json-ext-1.2.1.tar.bz2

【音乐】爱很简单-陶喆

猜你喜欢

CSS hack：针对IE6，IE7，firefox显示不同效果

CSS基础：CSS id 选择器 懂的请无视这篇文章 – _ -!

发表评论 点击这里取消回复。

热门标签

最新评论

热评文章

大家都在看

大家都在搜

微信公众号

CSS3 渐变按钮非常漂亮

CSS基础：CSS id 选择器懂的请无视这篇文章 – _ -!

发表评论点击这里取消回复。