Html
    Css
    Js
@import "http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css";
	body {
	font:13px/20px "Lucida Grande",Tahoma,Verdana,sans-serif;
	color:#404040;
	background:#f8f6f6;
}
.container {
	zoom:1;
}
.container:before,.container:after {
	content:'';
	display:table;
}
.container:after {
	clear:both;
}
.column {
	position:relative;
	z-index:1;
	float:left;
	width:25%;
	padding:30px 0;
	text-align:center;
	white-space:nowrap;
}
.column .button + .button {
	margin-left:20px;
}
@media screen and (max-width:800px) {
	.column {
	width:50%;
}
}@media screen and (max-width:400px) {
	.column {
	width:100%;
}
}.button {
	display:inline-block;
	position:relative;
	height:33px;
	line-height:33px;
	padding:0 15px;
	font-size:15px;
	color:white;
	text-decoration:none;
	text-shadow:0 -1px rgba(0,0,0,0.3);
	border:2px solid;
	border-radius:7px;
	outline:0;
	-webkit-box-shadow:0 2px 1px rgba(0,0,0,0.25);
	box-shadow:0 2px 1px rgba(0,0,0,0.25);
}
.button:before,.button:after {
	content:'';
	position:absolute;
}
.button:before {
	top:-5px;
	bottom:-5px;
	left:-5px;
	right:-5px;
	z-index:-1;
	border-radius:9px;
}
.button:after {
	top:0;
	bottom:0;
	right:0;
	left:0;
	border:2px solid rgba(255,255,255,0.1);
	border-bottom:0;
	border-radius:7px;
}
.button.alt {
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
	box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.button.alt:before {
	display:none;
}
.column.red {
	background:#d04022;
}
.button.red {
	background:#d02e17;
	border-color:#942110 #902010 #741a0d;
	background-image:-webkit-linear-gradient(top,#e74a29 0%,#e6451b 50%,#d02e17 50%,#b3150b 100%);
	background-image:-moz-linear-gradient(top,#e74a29 0%,#e6451b 50%,#d02e17 50%,#b3150b 100%);
	background-image:-o-linear-gradient(top,#e74a29 0%,#e6451b 50%,#d02e17 50%,#b3150b 100%);
	background-image:linear-gradient(to bottom,#e74a29 0%,#e6451b 50%,#d02e17 50%,#b3150b 100%);
}
.button.red:before {
	background:#ee442c;
	background-image:-webkit-linear-gradient(top,#b32511,#f3533c);
	background-image:-moz-linear-gradient(top,#b32511,#f3533c);
	background-image:-o-linear-gradient(top,#b32511,#f3533c);
	background-image:linear-gradient(to bottom,#b32511,#f3533c);
}
.button.red:active {
	background:#e63b1b;
	background-image:-webkit-linear-gradient(top,#a9110b 0%,#de3819 60%,#e63b1b 100%);
	background-image:-moz-linear-gradient(top,#a9110b 0%,#de3819 60%,#e63b1b 100%);
	background-image:-o-linear-gradient(top,#a9110b 0%,#de3819 60%,#e63b1b 100%);
	background-image:linear-gradient(to bottom,#a9110b 0%,#de3819 60%,#e63b1b 100%);
}
.button.red:active:after {
	border-color:#e63b1b;
}
.column.blue {
	background:#4071b6;
}
.button.blue {
	background:#3471b8;
	border-color:#255184 #244f80 #1e4068;
	background-image:-webkit-linear-gradient(top,#497fcc 0%,#3d72c8 50%,#3471b8 50%,#2365a0 100%);
	background-image:-moz-linear-gradient(top,#497fcc 0%,#3d72c8 50%,#3471b8 50%,#2365a0 100%);
	background-image:-o-linear-gradient(top,#497fcc 0%,#3d72c8 50%,#3471b8 50%,#2365a0 100%);
	background-image:linear-gradient(to bottom,#497fcc 0%,#3d72c8 50%,#3471b8 50%,#2365a0 100%);
}
.button.blue:before {
	background:#4c8ad3;
	background-image:-webkit-linear-gradient(top,#29609f,#5995da);
	background-image:-moz-linear-gradient(top,#29609f,#5995da);
	background-image:-o-linear-gradient(top,#29609f,#5995da);
	background-image:linear-gradient(to bottom,#29609f,#5995da);
}
.button.blue:active {
	background:#3d79c8;
	background-image:-webkit-linear-gradient(top,#216298 0%,#3774c4 60%,#3d79c8 100%);
	background-image:-moz-linear-gradient(top,#216298 0%,#3774c4 60%,#3d79c8 100%);
	background-image:-o-linear-gradient(top,#216298 0%,#3774c4 60%,#3d79c8 100%);
	background-image:linear-gradient(to bottom,#216298 0%,#3774c4 60%,#3d79c8 100%);
}
.button.blue:active:after {
	border-color:#3d79c8;
}
.column.green {
	background:#429538;
}
.button.green {
	background:#3e952d;
	border-color:#29621e #275e1c #1d4715;
	background-image:-webkit-linear-gradient(top,#45b436 0%,#3ca933 50%,#3e952d 50%,#337c1d 100%);
	background-image:-moz-linear-gradient(top,#45b436 0%,#3ca933 50%,#3e952d 50%,#337c1d 100%);
	background-image:-o-linear-gradient(top,#45b436 0%,#3ca933 50%,#3e952d 50%,#337c1d 100%);
	background-image:linear-gradient(to bottom,#45b436 0%,#3ca933 50%,#3e952d 50%,#337c1d 100%);
}
.button.green:before {
	background:#4ac233;
	background-image:-webkit-linear-gradient(top,#317c22,#52d039);
	background-image:-moz-linear-gradient(top,#317c22,#52d039);
	background-image:-o-linear-gradient(top,#317c22,#52d039);
	background-image:linear-gradient(to bottom,#317c22,#52d039);
}
.button.green:active {
	background:#42a933;
	background-image:-webkit-linear-gradient(top,#31741b 0%,#3fa131 60%,#42a933 100%);
	background-image:-moz-linear-gradient(top,#31741b 0%,#3fa131 60%,#42a933 100%);
	background-image:-o-linear-gradient(top,#31741b 0%,#3fa131 60%,#42a933 100%);
	background-image:linear-gradient(to bottom,#31741b 0%,#3fa131 60%,#42a933 100%);
}
.button.green:active:after {
	border-color:#42a933;
}
.column.cyan {
	background:#39a4b2;
}
.button.cyan {
	background:#2eabb3;
	border-color:#20797e #1f757a #195d62;
	background-image:-webkit-linear-gradient(top,#3dbdcd 0%,#33b2c7 50%,#2eabb3 50%,#1e9a99 100%);
	background-image:-moz-linear-gradient(top,#3dbdcd 0%,#33b2c7 50%,#2eabb3 50%,#1e9a99 100%);
	background-image:-o-linear-gradient(top,#3dbdcd 0%,#33b2c7 50%,#2eabb3 50%,#1e9a99 100%);
	background-image:linear-gradient(to bottom,#3dbdcd 0%,#33b2c7 50%,#2eabb3 50%,#1e9a99 100%);
}
.button.cyan:before {
	background:#3fccd5;
	background-image:-webkit-linear-gradient(top,#249299,#4dd3dc);
	background-image:-moz-linear-gradient(top,#249299,#4dd3dc);
	background-image:-o-linear-gradient(top,#249299,#4dd3dc);
	background-image:linear-gradient(to bottom,#249299,#4dd3dc);
}
.button.cyan:active {
	background:#33b9c7;
	background-image:-webkit-linear-gradient(top,#1d918f 0%,#31b2bf 60%,#33b9c7 100%);
	background-image:-moz-linear-gradient(top,#1d918f 0%,#31b2bf 60%,#33b9c7 100%);
	background-image:-o-linear-gradient(top,#1d918f 0%,#31b2bf 60%,#33b9c7 100%);
	background-image:linear-gradient(to bottom,#1d918f 0%,#31b2bf 60%,#33b9c7 100%);
}
.button.cyan:active:after {
	border-color:#33b9c7;
}
.column.brown {
	background:#c5aa3b;
}
.button.brown {
	background:#c8a22e;
	border-color:#927622 #8e7321 #755f1b;
	background-image:-webkit-linear-gradient(top,#d5ba4a 0%,#d2ba3d 50%,#c8a22e 50%,#af821e 100%);
	background-image:-moz-linear-gradient(top,#d5ba4a 0%,#d2ba3d 50%,#c8a22e 50%,#af821e 100%);
	background-image:-o-linear-gradient(top,#d5ba4a 0%,#d2ba3d 50%,#c8a22e 50%,#af821e 100%);
	background-image:linear-gradient(to bottom,#d5ba4a 0%,#d2ba3d 50%,#c8a22e 50%,#af821e 100%);
}
.button.brown:before {
	background:#dcb94d;
	background-image:-webkit-linear-gradient(top,#ae8c24,#e3c15b);
	background-image:-moz-linear-gradient(top,#ae8c24,#e3c15b);
	background-image:-o-linear-gradient(top,#ae8c24,#e3c15b);
	background-image:linear-gradient(to bottom,#ae8c24,#e3c15b);
}
.button.brown:active {
	background:#d2b33d;
	background-image:-webkit-linear-gradient(top,#a6791d 0%,#d0af35 60%,#d2b33d 100%);
	background-image:-moz-linear-gradient(top,#a6791d 0%,#d0af35 60%,#d2b33d 100%);
	background-image:-o-linear-gradient(top,#a6791d 0%,#d0af35 60%,#d2b33d 100%);
	background-image:linear-gradient(to bottom,#a6791d 0%,#d0af35 60%,#d2b33d 100%);
}
.button.brown:active:after {
	border-color:#d2b33d;
}
.column.pink {
	background:#b53686;
}
.button.pink {
	background:#b62b89;
	border-color:#801e61 #7c1d5e #63184b;
	background-image:-webkit-linear-gradient(top,#d03998 0%,#cb308c 50%,#b62b89 50%,#9c1c7b 100%);
	background-image:-moz-linear-gradient(top,#d03998 0%,#cb308c 50%,#b62b89 50%,#9c1c7b 100%);
	background-image:-o-linear-gradient(top,#d03998 0%,#cb308c 50%,#b62b89 50%,#9c1c7b 100%);
	background-image:linear-gradient(to bottom,#d03998 0%,#cb308c 50%,#b62b89 50%,#9c1c7b 100%);
}
.button.pink:before {
	background:#d83ca6;
	background-image:-webkit-linear-gradient(top,#9c2174,#df4aae);
	background-image:-moz-linear-gradient(top,#9c2174,#df4aae);
	background-image:-o-linear-gradient(top,#9c2174,#df4aae);
	background-image:linear-gradient(to bottom,#9c2174,#df4aae);
}
.button.pink:active {
	background:#cb3093;
	background-image:-webkit-linear-gradient(top,#941a77 0%,#c22e8d 60%,#cb3093 100%);
	background-image:-moz-linear-gradient(top,#941a77 0%,#c22e8d 60%,#cb3093 100%);
	background-image:-o-linear-gradient(top,#941a77 0%,#c22e8d 60%,#cb3093 100%);
	background-image:linear-gradient(to bottom,#941a77 0%,#c22e8d 60%,#cb3093 100%);
}
.button.pink:active:after {
	border-color:#cb3093;
}
.column.purple {
	background:#7351b7;
}
.button.purple {
	background:#6440be;
	border-color:#4a2f8c #482e89 #3c2672;
	background-image:-webkit-linear-gradient(top,#825ec9 0%,#7d53c5 50%,#6440be 50%,#482da8 100%);
	background-image:-moz-linear-gradient(top,#825ec9 0%,#7d53c5 50%,#6440be 50%,#482da8 100%);
	background-image:-o-linear-gradient(top,#825ec9 0%,#7d53c5 50%,#6440be 50%,#482da8 100%);
	background-image:linear-gradient(to bottom,#825ec9 0%,#7d53c5 50%,#6440be 50%,#482da8 100%);
}
.button.purple:before {
	background:#8161d0;
	background-image:-webkit-linear-gradient(top,#5534a7,#8c6ed8);
	background-image:-moz-linear-gradient(top,#5534a7,#8c6ed8);
	background-image:-o-linear-gradient(top,#5534a7,#8c6ed8);
	background-image:linear-gradient(to bottom,#5534a7,#8c6ed8);
}
.button.purple:active {
	background:#7753c5;
	background-image:-webkit-linear-gradient(top,#432ba0 0%,#714bc2 60%,#7753c5 100%);
	background-image:-moz-linear-gradient(top,#432ba0 0%,#714bc2 60%,#7753c5 100%);
	background-image:-o-linear-gradient(top,#432ba0 0%,#714bc2 60%,#7753c5 100%);
	background-image:linear-gradient(to bottom,#432ba0 0%,#714bc2 60%,#7753c5 100%);
}
.button.purple:active:after {
	border-color:#7753c5;
}
.column.gray {
	background:#9e9e9e;
}
.button.gray {
	background:#999999;
	border-color:#787878 #757575 #666666;
	background-image:-webkit-linear-gradient(top,#adadad 0%,#a6a6a6 50%,#999999 50%,#8e7b7c 100%);
	background-image:-moz-linear-gradient(top,#adadad 0%,#a6a6a6 50%,#999999 50%,#8e7b7c 100%);
	background-image:-o-linear-gradient(top,#adadad 0%,#a6a6a6 50%,#999999 50%,#8e7b7c 100%);
	background-image:linear-gradient(to bottom,#adadad 0%,#a6a6a6 50%,#999999 50%,#8e7b7c 100%);
}
.button.gray:before {
	background:#b6afaf;
	background-image:-webkit-linear-gradient(top,#8b8484,#c2b7b7);
	background-image:-moz-linear-gradient(top,#8b8484,#c2b7b7);
	background-image:-o-linear-gradient(top,#8b8484,#c2b7b7);
	background-image:linear-gradient(to bottom,#8b8484,#c2b7b7);
}
.button.gray:active {
	background:#a6a6a6;
	background-image:-webkit-linear-gradient(top,#8a7577 0%,#a1a1a1 60%,#a6a6a6 100%);
	background-image:-moz-linear-gradient(top,#8a7577 0%,#a1a1a1 60%,#a6a6a6 100%);
	background-image:-o-linear-gradient(top,#8a7577 0%,#a1a1a1 60%,#a6a6a6 100%);
	background-image:linear-gradient(to bottom,#8a7577 0%,#a1a1a1 60%,#a6a6a6 100%);
}
.button.gray:active:after {
	border-color:#a6a6a6;
}
.lt-ie9 .button:before {
	display:none;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3常用按钮

更新时间:2019-08-27 00:01:09

0