css美化36款按钮效果代码-html代码-BFW代码库

代码语言：html
代码描述：css美化36款按钮效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        body{font-size:14px;font-family:"微软雅黑";background:#f5faff;}
        .demo_con{width: 960px;margin:40px auto 0;}
        @charset "utf-8";
.button{
	width:140px;
	line-height:38px;
	text-align:center;
	font-weight:bold;
	color:#fff;
	text-shadow:1px 1px 1px #333;
	border-radius:5px;
	margin:0 20px 20px 0;
	position:relative;
	overflow:hidden;
	float:left;display:inline;
}
.button:nth-child(6n){margin-right:0;}
.button.gray{
	color:#8c96a0;
	text-shadow:1px 1px 1px #fff;
	border:1px solid #dce1e6;
	box-shadow:0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
	background:-webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
	background:-moz-linear-gradient(top,#f2f3f7,#e4e8ec);
	background:linear-gradient(top,#f2f3f7,#e4e8ec);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f3f7', endColorstr='#e4e8ec'); /*  IE */
}
.button.black{
	border:1px solid #333;
	box-shadow:0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
	background:-webkit-linear-gradient(top,#656565,#4c4c4c);
	background:-moz-linear-gradient(top,#656565,#4a4a4a);
	background:linear-gradient(top,#656565,#4a4a4a);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#656565', endColorstr='#4a4a4a'); /*  IE */
}
.button.red{
	border:1px solid #b42323;
	box-shadow:0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
	background:-webkit-linear-gradient(top,#d53939,#b92929);
	background:-moz-linear-gradient(top,#d53939,#b92929);
	background:linear-gradient(top,#d53939,#b92929);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d53939', endColorstr='#b92929'); /*  IE */
}
.button.yellow{
	border:1px solid #d2a000;
	box-shadow:0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
	background:-webkit-linear-gradient(top,#fece34,#d8a605);
	background:-moz-linear-gradient(top,#fece34,#d8a605);
	background:linear-gradient(top,#fece34,#d8a605);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fece34', endColorstr='#d8a605'); /*  IE */
}
.button.green{
	border:1px solid #64c878;
	box-shadow:0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
	background:-webkit-linear-gradient(top,#90dfa2,#84d494);
	background:-moz-linear-gradient(top,#90dfa2,#84d494);
	background:linear-gradient(top,#90dfa2,#84d494);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90dfa2', endColorstr='#84d494'); /*  IE */
}
.button.blue{
	border:1px solid #1e7db9;
	box-shadow:0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
	background:-webkit-linear-gradient(top,#42a4e0,#2e88c0);
	background:-moz-linear-gradient(top,#42a4e0,#2e88c0);
	background:linear-gradient(top,#42a4e0,#2e88c0);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#42a4e0', endColorstr='#2e88c0'); /*  IE */
}
.round,.side,.tags{padding-right:30px;}
.round:after{
	position:absolute;
	display:inline-block;
	content:"\003c";
	top:50%;
	right:10px;
	margin-top:-10px;
	width:17px;
	height:20px;
	padding-left:3px;
	line-height:18px;
	font-size:10px;
	font-weight:normal;
	border-radius:10px;
	text-shadow:-2px 0 1px #333;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg); 
	transform:rotate(-90deg);
}
.gray.round:after{
	box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(0,0,0,.2);
	background:-webkit-linear-gradient(top,#dce1e6,#dde2e7);
	background:-moz-linear-gradient(top,#dce1e6,#dde2e7);
	background:linear-gradient(top,#dce1e6,#dde2e7);
	text-shadow:-2px 0 1px #fff;
}
.black.round:after{
	box-shadow:1px 0 1px rgba(255,255,255,.5) inset,1px 0 1px rgba(0,0,0,.9);
	background:-webkit-linear-gradient(top,#333,#454545);
	background:-moz-linear-gradient(top,#333,#454545);
	background:linear-gradient(top,#333,#454545);
}
.red.round:after{
	box-shadow:1px 0 1px rgba(255,255,255,.6) inset,1px 0 1px rgba(130,25,25,.9);
	background:-webkit-linear-gradient(top,#b12222,#b42323);
	background:-moz-linear-gradient(top,#b12222,#b42323);
	background:linear-gradient(top,#b12222,#b42323);
}
.yellow.round:after{
	box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(148,131,4,.9);
	background:-webkit-linear-gradient(top,#cf9d00,#d2a000);
	background:-moz-linear-gradient(top,#cf9d00,#d2a000);
	background:linear-gradient(top,#cf9d00,#d2a000);                         
}
.green.round:after{
	box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(51,126,66,.9);
	background:-webkit-linear-gradient(top,#64c878,#6dcb80);
	background:-moz-linear-gradient(top,#64c878,#6dcb80);
	background:linear-gradient(top,#64c878,#6dcb80);                         
}
.blue.round:after{
	box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(18,85,128,.9);
	background:-webkit-linear-gradient(top,#1e7db9,#2b85bd);
	background:-moz-linear-gradient(top,#1e7db9,#2b85bd);
	background:linear-gradient(top,#1e7db9,#2b85bd);                         
}
.side:after{
	position:absolute;
	display:inline-block;
	content:"\00bb";
	top:3px;
	right:-4px;
	width:38px;
	height:30px;
	font-weight:normal;
	line-height:26px;
	border-radius:0 0 5px 5px;
	text-shadow:-2px 0 1px #333;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	transform:rotate(-90deg);
}
.gray.side:after{
	text-shadow:-2px 0 1px #fff;
	border-top:1px solid #d4d4d4;
	box-shadow:-2px 0 1px #eceef1 inset;
	background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
	background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
	background:linear-gradient(right,#e1e6ea,#f2f2f6 60%); 
}
.black.side:after{
	border-top:1px solid #222;
	box-shadow:-2px 0 1px #606060 inset;
	background:-webkit-linear-gradient(right,#373737,#555 60%);
	background:-moz-linear-gradient(right,#373737,#555 60%);
	background:linear-gradient(right,#373737,#555 60%); 
}
.red.side:after{
	border-top:1px solid #aa1e1e;
	box-shadow:-2px 0 1px #c75959 inset;
	background:-webkit-linear-gradient(right,#b82929,#d73f3f 60%);
	background:-moz-linear-gradient(top,#b82929,#d73f3f 60%);
	background:linear-gradient(top,#b82929,#d73f3f 60%); 
}
.yellow.side:after{
	border-top:1px solid #ba8f06;
	box-shadow:-2px 0 1px #deb842 inset;
	background:-webkit-linear-gradient(right,#d5a406,#fdc40b 60%);
	background:-moz-linear-gradient(right,#d5a406,#fdc40b 60%);
	background:linear-gradient(right,#d5a406,#fdc40b 60%); 
}
.green.side:after{
	border-top:1px solid #53b567;
	box-shadow:-2px 0 1px #8ad599 inset;
	background:-webkit-linear-gradient(right,#69ca7c,#91e5a5 60%);
	background:-moz-linear-gradient(right,#69ca7c,#91e5a5 60%);
	background:linear-gradient(right,#69ca7c,#91e5a5 60%); 
}
.blue.side:after{
	border-top:1px solid #1971a8;
	box-shadow:-2px 0 1px #559dca inset;
	background:-webkit-linear-gradient(right,#2482bd,#3fa2e0 60%);
	background:-moz-linear-gradient(right,#2482bd,#3fa2e0 60%);
	background:linear-gradient(right,#2482bd,#3fa2e0 60%); 
}
.tags:after{
	font-weight:normal;
	position:absolute;
	display:inline-block;
	content:"FREE";
	top:-3px;
	right:-33px;
	color:#fff;
	text-shadow:none;
	width:85px;
	height:25px;
	line-height:28px;
	-webkit-transform:rotate(45deg) scale(.7,.7);
	-moz-transform:rotate(45deg) scale(.7,.7);
	transform:rotate(45deg) scale(.7,.7);
}
.gray.tags:after{background:#8c96a0;border:2px solid #fff;}
.black.tags:after{background:#333;border:2px solid #777;}
.red.tags:after{background:#b42323;border:2px solid #df4141;}
.yellow.tags:after{background:#d2a000;border:2px solid #fcc100;}
.green.tags:after{background:#64c878;border:2px solid #9bebac;}
.blue.tags:after{background:#1e7db9;border:2px solid #54b1e9;}
.button.rarrow,.button.larrow{overflow:visible;}
.rarrow:after,.rarrow:before,.larrow:after,.larrow:before{
	position:absolute;
	content:"";
	display:block;
	width:28px;
	height:28px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}
.rarrow:before{
	width:27px;
	height:27px;
	top:6px;
	right:-13px;
	clip:rect(auto auto 26px 2px);
}
.rarrow:after{
	top:6px;
	right:-12px;
	clip:rect(auto auto 26px 2px);
}
.gray.rarrow:before{background:#d6dbe0;}
.gray.rarrow:after{
	box-shadow:0 1px 0 #fff inset,-1px 0 0 #b7babd inset;
	background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
	background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
	background:linear-gradient(top left,#f2f3f7,#e4e8ec);
}
.black.rarrow:before{background:#333;}
.black.rarrow:after{
	box-shadow:0 1px 0 #8B8B8B inset,-1px 0 0 #3d3d3d inset,-2px 0 0 #8B8B8B inset;
	background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
	background:-moz-linear-gradient(top left,#656565,#4C4C4C);
	background:linear-gradient(top left,#656565,#4C4C4C);
}
.red.rarrow:before{background:#B42323;}
.red.rarrow:after{
	box-shadow:0 1px 0 #E99494 inset,-1px 0 0 #954B4B inset,-2px 0 0 #E99494 inset;
	background:-webkit-linear-gradient(top left,#D53939,#B92929);
	background:-moz-linear-gradient(top left,#D53939,#B92929);
	background:linear-gradient(top left,#D53939,#B92929);
}
.yellow.rarrow:before{background:#D2A000;}
.yellow.rarrow:after{
	box-shadow:0 1px 0 #FEDD71 inset,-1px 0 0 #A38B39 inset,-2px 0 0 #FEDD71 inset;
	background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
	background:-moz-linear-gradient(top left,#FECE34,#D8A605);
	background:linear-gradient(top left,#FECE34,#D8A605);
}
.green.rarrow:before{background:#64C878;}
.green.rarrow:after{
	box-shadow:0 1px 0 #B9ECC4 inset,-1px 0 0 #6C9F76 inset,-2px 0 0 #B9ECC4 inset;
	background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
	background:-moz-linear-gradient(top left,#90DFA2,#84D494);
	background:linear-gradient(top left,#90DFA2,#84D494);
}
.blue.rarrow:before{background:#1E7DB9;}
.blue.rarrow:after{
	box-shadow:0 1px 0 #8FCAEE inset,-1px 0 0 #497897 inset,-2px 0 0 #8FCAEE inset;
	background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
	background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
	background:linear-gradient(top left,#42A4E0,#2E88C0);
}
.larrow:before{
	top:6px;
	left:-13px;
	width:27px;
	height:27px;
	clip:rect(2px 26px auto auto);
}
.larrow:after{
	top:6px;
	left:-12px;
	clip:rect(2px 26px auto auto);
}
.gray.larrow:before{background:#d6dbe0;}
.gray.larrow:after{
	box-shadow:0 -1px 0 #b7babd inset,1px 0 0 #fff inset;
	background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
	background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
	background:linear-gradient(top left,#f2f3f7,#e4e8ec);
}
.black.larrow:before{background:#333;}
.black.larrow:after{
	box-shadow:0 -1px 0 #3d3d3d inset,0 -2px 0 #8B8B8B inset,1px 0 0 #8B8B8B inset;
	background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
	background:-moz-linear-gradient(top left,#656565,#4C4C4C);
	background:linear-gradient(top left,#656565,#4C4C4C);
}
.red.larrow:before{background:#B42323;}
.red.larrow:after{
	box-shadow:0 -1px 0 #954B4B inset,0 -2px 0 #E99494 inset,1px 0 0 #E99494 inset;
	background:-webkit-linear-gradient(top left,#D53939,#B92929);
	background:-moz-linear-gradient(top left,#D53939,#B92929);
	background:linear-gradient(top left,#D53939,#B92929);
}
.yellow.larrow:before{background:#D2A000;}
.yellow.larrow:after{
	box-shadow:0 -1px 0 #A38B39 inset,0 -2px 0 #FEDD71 inset,1px 0 0 #FEDD71 inset;
	background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
	background:-moz-linear-gradient(top left,#FECE34,#D8A605);
	background:linear-gradient(top left,#FECE34,#D8A605);
}
.green.larrow:before{background:#64C878;}
.green.larrow:after{
	box-shadow:0 -1px 0 #6C9F76 inset,0 -2px 0 #B9ECC4 inset,1px 0 0 #B9ECC4 inset;
	background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
	background:-moz-linear-gradient(top left,#90DFA2,#84D494);
	background:linear-gradient(top left,#90DFA2,#84D494);
}
.blue.larrow:before{background:#1E7DB9;}
.blue.larrow:after{
	box-shadow:0 -1px 0 #497897 inset,0 -2px 0 #8FCAEE inset,1px 0 0 #8FCAEE inset;
	background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
	background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
	background:linear-gradient(top left,#42A4E0,#2E88C0);
}
.gray:hover{
	background:-webkit-linear-gradient(top,#fefefe,#ebeced);
	background:-moz-linear-gradient(top,#f2f3f7,#ebeced);
	background:linear-gradient(top,#f2f3f7,#ebeced);
}
.black:hover{
	background:-webkit-linear-gradient(top,#818181,#575757);
	background:-moz-linear-gradient(top,#818181,.........完整代码请登录后点击上方下载按钮下载查看