Html
    Css
    Js
.demo {
	width:760px;
	margin:20px auto 0 auto;
	height:70px;
}
.button {
	display:inline-block;
	outline:none;
	cursor:pointer;
	text-align:center;
	text-decoration:none;
	font:16px/100% 'Microsoft yahei',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;
}
.bigrounded {
	-webkit-border-radius:2em;
	-moz-border-radius:2em;
	border-radius:2em;
}
.medium {
	font-size:12px;
	padding:.4em 1.5em .42em;
}
.small {
	font-size:11px;
	padding:.2em 1em .275em;
}
/* blue */
.blue {
	color:#d9eef7;
	border:solid 1px #0076a3;
	background:#0095cd;
	background:-webkit-gradient(linear,left top,left bottom,from(#00adee),to(#0078a5));
	background:-moz-linear-gradient(top,#00adee,#0078a5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',endColorstr='#0078a5');
}
.blue:hover {
	background:#007ead;
	background:-webkit-gradient(linear,left top,left bottom,from(#0095cc),to(#00678e));
	background:-moz-linear-gradient(top,#0095cc,#00678e);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',endColorstr='#00678e');
}
.blue:active {
	color:#80bed6;
	background:-webkit-gradient(linear,left top,left bottom,from(#0078a5),to(#00adee));
	background:-moz-linear-gradient(top,#0078a5,#00adee);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee');
}
/* green */
.green {
	color:#e8f0de;
	border:solid 1px #538312;
	background:#64991e;
	background:-webkit-gradient(linear,left top,left bottom,from(#7db72f),to(#4e7d0e));
	background:-moz-linear-gradient(top,#7db72f,#4e7d0e);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',endColorstr='#4e7d0e');
}
.green:hover {
	background:#538018;
	background:-webkit-gradient(linear,left top,left bottom,from(#6b9d28),to(#436b0c));
	background:-moz-linear-gradient(top,#6b9d28,#436b0c);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',endColorstr='#436b0c');
}
.green:active {
	color:#a9c08c;
	background:-webkit-gradient(linear,left top,left bottom,from(#4e7d0e),to(#7db72f));
	background:-moz-linear-gradient(top,#4e7d0e,#7db72f);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',endColorstr='#7db72f');
}
/* white */
.white {
	color:#606060;
	border:solid 1px #b7b7b7;
	background:#fff;
	background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ededed));
	background:-moz-linear-gradient(top,#fff,#ededed);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
}
.white:hover {
	background:#ededed;
	background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#dcdcdc));
	background:-moz-linear-gradient(top,#fff,#dcdcdc);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dcdcdc');
}
.white:active {
	color:#999;
	background:-webkit-gradient(linear,left top,left bottom,from(#ededed),to(#fff));
	background:-moz-linear-gradient(top,#ededed,#fff);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff');
}
/* orange */
.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');
}

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

纯CSS按钮

0