css实现炫酷立体清爽按钮效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现炫酷立体清爽按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
	background:#666;
	font-family:Helvetica,sans-serif
}
.button,.button-bevel {
	font-family:Helvetica,sans-serif;
	font-size:13px;
	color:#fff;
	text-decoration:none;
	display:inline-block;
	text-align:center;
	padding:7px 20px 9px;
	margin:.5em .5em .5em 0;
	cursor:pointer;
	text-shadow:0 1px 1px rgba(0,0,0,0.4);
	-webkit-transition:.1s linear;
	-moz-transition:.1s linear;
	-ms-transition:.1s linear;
	-o-transition:.1s linear;
	transition:.1s linear;
	border-radius:2px;
	box-shadow:inset rgba(255,255,255,0.3) 1px 1px 0
}
.button:active {
	box-shadow:inset rgba(0,0,0,0.4) 0 0 6px
}
.orange {
	background:#ffb700;
	background:-moz-linear-gradient(top,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,183,0,1)),color-stop(100%,rgba(255,140,0,1)));
	background:-webkit-linear-gradient(top,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	background:-o-linear-gradient(top,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	background:-ms-linear-gradient(top,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	background:linear-gradient(to bottom,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb700',endColorstr='#ff8c00',GradientType=0);
	border:1px solid #e59500
}
.orange:hover {
	background:#ffcb48;
	background:-moz-linear-gradient(top,rgba(255,203,72,1) 0,rgba(255,156,35,1) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,203,72,1)),color-stop(100%,rgba(255,156,35,1)));
	background:-webkit-linear-gradient(top,rgba(255,203,72,1) 0,rgba(255,156,35,1) 100%);
	background:-o-linear-gradient(top,rgba(255,203,72,1) 0,rgba(255,156,35,1) 100%);
	background:-ms-linear-gradient(top,rgba(255,203,72,1) 0,rgba(255,156,35,1) 100%);
	background:linear-gradient(to bottom,rgba(255,203,72,1) 0,rgba(255,156,35,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcb48',endColorstr='#ff9c23',GradientType=0)
}
.cyan {
	background:#82cff1;
	background:-moz-linear-gradient(top,rgba(130,207,241,1) 0,rgba(56,174,234,1) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(130,207,241,1)),color-stop(100%,rgba(56,174,234,1)));
	background:-webkit-linear-gradient(top,rgba(130,207,241,1) 0,rgba(56,174,234,1) 100%);
	background:-o-linear-gradient(top,rgba(130,207,241,1) 0,rgba(56,174,234,1) 100%);
	background:-ms-linear-gradient(top,rgba(130,207,241,1) 0,rgba(56,174,234,1) 100%);
	background:linear-gradient(to bottom,rgba(130,207,241,1) 0,rgba(56,174,234,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#82cff1',endColorstr='#38aeea',GradientType=0);
	border:1px solid #3cafcf
}
.cyan:hover {
	background:#99d8f4;
	background:-moz-linear-gradient(top,rgba(153,216,244,1) 0,rgba(79,183,236,1) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(153,216,244,1)),color-stop(100%,rgba(79,183,236,1)));
	background:-webkit-linear-gradient(top,rgba(153,216,244,1) 0,rgba(79,183,236,1) 100%);
	background:-o-linear-gradient(top,rgba(153,216,244,1) 0,rgba(79,183,236,1) 100%);
	background:-ms-linear-gradient(top,rgba(153,216,244,1) 0,rgba(79,183,236,1) 100%);
	background:linear-gradient(to bottom,rgba(153,216,244,1) 0,rgba(79,183,236,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#99d8f4',endColorstr='#4fb7ec',GradientType=0)
}
.red {
	background:#e25b53;
	background:-moz-linear-gradient(top,#e25b53 0,#dd2011 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e25b53),color-stop(100%,#dd2011));
	background:-webkit-linear-gradient(top,#e25b53 0,#dd2011 100%);
	background:-o-linear-gradient(top,#e25b53 0,#dd2011 100%);
	background:-ms-linear-gradient(top,#e25b53 0,#dd2011 100%);
	background:linear-gradient(to bottom,#e25b53 0,#dd2011 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e25b53',endColorstr='#dd2011',GradientType=0);
	border:1px solid #c42222
}
.red:hover {
	background:#dd7671;
	background:-moz-linear-gradient(top,#dd7671 0,#dd2011 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#dd7671),color-stop(100%,#dd2011));
	background:-webkit-linear-gradient(top,#dd7671 0,#dd2011 100%);
	background:-o-linear-gradient(top,#dd7671 0,#dd2011 100%);
	background:-ms-linear-gradient(top,#dd7671 0,#dd2011 100%);
	background:linear-gradient(to bottom,#dd7671 0,#dd2011 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd7671',endColorstr='#dd2011',GradientType=0)
}
.black {
	background:#444;
	background:-moz-linear-gradient(top,#444 0,#1c1c1c 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#444),color-stop(100%,#1c1c1c));
	background:-webkit-linear-gradient(top,#444 0,#1c1c1c 100%);
	background:-o-linear-gradient(top,#444 0,#1c1c1c 100%);
	background:-ms-linear-gradient(top,#444 0,#1c1c1c 100%);
	background:linear-gradient(to bottom,#444 0,#1c1c1c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#1c1c1c',GradientType=0);
	border:1px solid #2a2a2a
}
.black:hover {
	background:#686868;
	background:-moz-linear-gradient(top,#686868 0,#1c1c1c 100%);.........完整代码请登录后点击上方下载按钮下载查看