牛牛逼逼叉叉
菜单

纯css3 gradient属性制作6种渐变色的按钮样式btndemo

2013年12月03日,分类《前端开发》,作者:
博客捐助

最下方有浏览地址

<!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>Insert title here</title>
<style type="text/css">
@font-face{
	font-family:’Oswald’;
	font-style:normal;
	font-weight:400;
	src:local(’Oswald Regular’), local(’Oswald-Regular’),
		url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff)
		format(’woff’);
}

/* b-red */
.b-red{
	font-family:Oswald;
	-webkit-perspective:1000;
	-webkit-backface-visibility:hidden;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff0000’, endColorstr=’#ff3333’); /*  IE */
	background-image:linear-gradient(bottom, #ff0000 25%, #ff3333 63%);
	background-image:-o-linear-gradient(bottom, #ff0000 25%, #ff3333 63%);
	background-image:-moz-linear-gradient(bottom, #ff0000 25%, #ff3333 63%);
	background-image:-webkit-linear-gradient(bottom, #ff0000 25%, #ff3333 63%);
	background-image:-ms-linear-gradient(bottom, #ff0000 25%, #ff3333 63%);
	color:#fff;
	width:120px;
	text-align:center;
	padding:10px 20px;
	border-radius:5px;
	border:2px solid #b30000;
	margin:50px auto;
	box-shadow:0 10px 5px -5px rgba(0, 0, 0, 0.5), 0 5px 25px
		rgba(255, 0, 0, 0.5);
	transition:all 100ms ease;
}
.b-red:hover{cursor:pointer;}
.b-red:active{
	transform:translatey(2px);
	box-shadow:0 8px 5px -5px rgba(0, 0, 0, 0.65), 0 3px 25px
		rgba(255, 0, 0, 0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#e60000’, endColorstr=’#ff1a1a’); /*  IE */
	background-image:linear-gradient(bottom, #e60000 25%, #ff1a1a 63%);
	background-image:-o-linear-gradient(bottom, #e60000 25%, #ff1a1a 63%);
	background-image:-moz-linear-gradient(bottom, #e60000 25%, #ff1a1a 63%);
	background-image:-webkit-linear-gradient(bottom, #e60000 25%, #ff1a1a 63%);
	background-image:-ms-linear-gradient(bottom, #e60000 25%, #ff1a1a 63%);
}
.b-red::selection{background:transparent;}
/* b-blue */
.b-blue{
	font-family:Oswald;
	-webkit-perspective:1000;
	-webkit-backface-visibility:hidden;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0000ff’, endColorstr=’#3333ff’); /*  IE */
	background-image:linear-gradient(bottom, #0000ff 25%, #3333ff 63%);
	background-image:-o-linear-gradient(bottom, #0000ff 25%, #3333ff 63%);
	background-image:-moz-linear-gradient(bottom, #0000ff 25%, #3333ff 63%);
	background-image:-webkit-linear-gradient(bottom, #0000ff 25%, #3333ff 63%);
	background-image:-ms-linear-gradient(bottom, #0000ff 25%, #3333ff 63%);
	color:#fff;
	width:120px;
	text-align:center;
	padding:10px 20px;
	border-radius:5px;
	border:2px solid #0000b3;
	margin:50px auto;
	box-shadow:0 10px 5px -5px rgba(0, 0, 0, 0.5), 0 5px 25px
		rgba(0, 0, 255, 0.5);
	transition:all 100ms ease;
}
.b-blue:hover{cursor:pointer;}
.b-blue:active{
	transform:translatey(2px);
	box-shadow:0 8px 5px -5px rgba(0, 0, 0, 0.65), 0 3px 25px
		rgba(0, 0, 255, 0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0000e6’, endColorstr=’#1a1aff’); /*  IE */
	background-image:linear-gradient(bottom, #0000e6 25%, #1a1aff 63%);
	background-image:-o-linear-gradient(bottom, #0000e6 25%, #1a1aff 63%);
	background-image:-moz-linear-gradient(bottom, #0000e6 25%, #1a1aff 63%);
	background-image:-webkit-linear-gradient(bottom, #0000e6 25%, #1a1aff 63%);
	background-image:-ms-linear-gradient(bottom, #0000e6 25%, #1a1aff 63%);
}
.b-blue::selection{background:transparent;}
/* b-green */
.b-green{
	font-family:Oswald;
	-webkit-perspective:1000;
	-webkit-backface-visibility:hidden;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#008000’, endColorstr=’#00b300’); /*  IE */
	background-image:linear-gradient(bottom, #008000 25%, #00b300 63%);
	background-image:-o-linear-gradient(bottom, #008000 25%, #00b300 63%);
	background-image:-moz-linear-gradient(bottom, #008000 25%, #00b300 63%);
	background-image:-webkit-linear-gradient(bottom, #008000 25%, #00b300 63%);
	background-image:-ms-linear-gradient(bottom, #008000 25%, #00b300 63%);
	color:#fff;
	width:120px;
	text-align:center;
	padding:10px 20px;
	border-radius:5px;
	border:2px solid #003400;
	margin:50px auto;
	box-shadow:0 10px 5px -5px rgba(0, 0, 0, 0.5), 0 5px 25px
		rgba(0, 128, 0, 0.5);
	transition:all 100ms ease;
}
.b-green:hover{cursor:pointer;}
.b-green:active{
	transform:translatey(2px);
	box-shadow:0 8px 5px -5px rgba(0, 0, 0, 0.65), 0 3px 25px
		rgba(0, 128, 0, 0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#006700’, endColorstr=’#009a00’); /*  IE */
	background-image:linear-gradient(bottom, #006700 25%, #009a00 63%);
	background-image:-o-linear-gradient(bottom, #006700 25%, #009a00 63%);
	background-image:-moz-linear-gradient(bottom, #006700 25%, #009a00 63%);
	background-image:-webkit-linear-gradient(bottom, #006700 25%, #009a00 63%);
	background-image:-ms-linear-gradient(bottom, #006700 25%, #009a00 63%);
}

.b-green::selection{background:transparent;}
/* b-orange */
.b-orange{
	font-family:Oswald;
	-webkit-perspective:1000;
	-webkit-backface-visibility:hidden;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffa500’, endColorstr=’#ffb733’); /*  IE */
	background-image:linear-gradient(bottom, #ffa500 25%, #ffb733 63%);
	background-image:-o-linear-gradient(bottom, #ffa500 25%, #ffb733 63%);
	background-image:-moz-linear-gradient(bottom, #ffa500 25%, #ffb733 63%);
	background-image:-webkit-linear-gradient(bottom, #ffa500 25%, #ffb733 63%);
	background-image:-ms-linear-gradient(bottom, #ffa500 25%, #ffb733 63%);
	color:#fff;
	width:120px;
	text-align:center;
	padding:10px 20px;
	border-radius:5px;
	border:2px solid #b37300;
	margin:50px auto;
	box-shadow:0 10px 5px -5px rgba(0, 0, 0, 0.5), 0 5px 25px
		rgba(255, 165, 0, 0.5);
	transition:all 100ms ease;
}
.b-orange:hover{cursor:pointer;}
.b-orange:active{
	transform:translatey(2px);
	box-shadow:0 8px 5px -5px rgba(0, 0, 0, 0.65), 0 3px 25px
		rgba(255, 165, 0, 0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#e69500’, endColorstr=’#ffae1a’); /*  IE */
	background-image:linear-gradient(bottom, #e69500 25%, #ffae1a 63%);
	background-image:-o-linear-gradient(bottom, #e69500 25%, #ffae1a 63%);
	background-image:-moz-linear-gradient(bottom, #e69500 25%, #ffae1a 63%);
	background-image:-webkit-linear-gradient(bottom, #e69500 25%, #ffae1a 63%);
	background-image:-ms-linear-gradient(bottom, #e69500 25%, #ffae1a 63%);
}
.b-orange::selection{background:transparent;}
/* b-black */
.b-black{
	font-family:Oswald;
	-webkit-perspective:1000;
	-webkit-backface-visibility:hidden;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#000000’, endColorstr=’#1a1a1a’); /*  IE */
	background-image:linear-gradient(bottom, #000000 25%, #1a1a1a 63%);
	background-image:-o-linear-gradient(bottom, #000000 25%, #1a1a1a 63%);
	background-image:-moz-linear-gradient(bottom, #000000 25%, #1a1a1a 63%);
	background-image:-webkit-linear-gradient(bottom, #000000 25%, #1a1a1a 63%);
	background-image:-ms-linear-gradient(bottom, #000000 25%, #1a1a1a 63%);
	color:#fff;
	width:120px;
	text-align:center;
	padding:10px 20px;
	border-radius:5px;
	border:2px solid #000000;
	margin:50px auto;
	box-shadow:0 10px 5px -5px rgba(0, 0, 0, 0.5), 0 5px 25px
		rgba(0, 0, 0, 0.5);
	transition:all 100ms ease;
}
.b-black:hover{cursor:pointer;}
.b-black:active{
	transform:translatey(2px);
	box-shadow:0 8px 5px -5px rgba(0, 0, 0, 0.65), 0 3px 25px
		rgba(0, 0, 0, 0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#000000’, endColorstr=’#0d0d0d’); /*  IE */
	background-image:linear-gradient(bottom, #000000 25%, #0d0d0d 63%);
	background-image:-o-linear-gradient(bottom, #000000 25%, #0d0d0d 63%);
	background-image:-moz-linear-gradient(bottom, #000000 25%, #0d0d0d 63%);
	background-image:-webkit-linear-gradient(bottom, #000000 25%, #0d0d0d 63%);
	background-image:-ms-linear-gradient(bottom, #000000 25%, #0d0d0d 63%);
}
.b-black::selection{background:transparent;}
/* b-custom */
.b-custom{
	font-family:Oswald;
	-webkit-perspective:1000;
	-webkit-backface-visibility:hidden;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#1e88c9’, endColorstr=’#39a1e1’); /*  IE */
	background-image:linear-gradient(bottom, #1e88c9 25%, #39a1e1 63%);
	background-image:-o-linear-gradient(bottom, #1e88c9 25%, #39a1e1 63%);
	background-image:-moz-linear-gradient(bottom, #1e88c9 25%, #39a1e1 63%);
	background-image:-webkit-linear-gradient(bottom, #1e88c9 25%, #39a1e1 63%);
	background-image:-ms-linear-gradient(bottom, #1e88c9 25%, #39a1e1 63%);
	color:#fff;
	width:120px;
	text-align:center;
	padding:10px 20px;
	border-radius:5px;
	border:2px solid #145b86;
	margin:50px auto;
	box-shadow:0 10px 5px -5px rgba(0, 0, 0, 0.5), 0 5px 25px
		rgba(30, 136, 201, 0.5);
	transition:all 100ms ease;
}
.b-custom:hover{cursor:pointer;}
.b-custom:active{
	transform:translatey(2px);
	box-shadow:0 8px 5px -5px rgba(0, 0, 0, 0.65), 0 3px 25px
		rgba(30, 136, 201, 0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#1b79b3’, endColorstr=’#2297de’); /*  IE */
	background-image:linear-gradient(bottom, #1b79b3 25%, #2297de 63%);
	background-image:-o-linear-gradient(bottom, #1b79b3 25%, #2297de 63%);
	background-image:-moz-linear-gradient(bottom, #1b79b3 25%, #2297de 63%);
	background-image:-webkit-linear-gradient(bottom, #1b79b3 25%, #2297de 63%);
	background-image:-ms-linear-gradient(bottom, #1b79b3 25%, #2297de 63%);
}
.b-custom::selection{background:transparent;}
</style>
</head>
<body>


	<div class="b-red">Red button!</div>
	<div class="b-blue">Blue button!</div>
	<div class="b-green">Green button!</div>
	<div class="b-orange">Orange button!</div>
	<div class="b-black">Black button!</div>
	<div class="b-custom">Cyan-ish button!</div>


</body>
</html>


浏览 http://www.nnbbxx.net/Download/css3gradientbtndemo.html



发表评论

电子邮件地址不会被公开。 必填项已用*标注

【上一篇】

关于百度决绝外链那点事使用与方法-个人观点

【下一篇】

jquery图片切换插件制作图片层叠缩放展示效果