一款纯css3实现的颜色渐变按钮的特效代码教程

一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非常好看，一起看下效果图：

下面是实现的代码。

页面代码：

<div class="container">
       <a target="_blank" class="btn green" href="#"><span>Nominate Yourself</span></a>
       <a target="_blank" class="btn orange" href="#"><span>Nominate Someone</span></a>
       <a target="_blank" class="btn blue" href="#"><span>Buy Tickets Now</span></a>
</div>

样式代码：

.btn {
	display:inline-block;
	margin:1em 0;
	padding:1em 2em;
	background:transparent;
	border:2px;
	border-radius:3px;
	font-weight:400;
	text-align:center
}
.btn.green {
	box-shadow:0 1px 0 1px rgba(43,220,146,0.25),0 -1px 0 1px rgba(129,214,106,0.25),1px 0 0 1px rgba(43,220,146,0.25),-1px 0 0 1px rgba(129,214,106,0.25),1px -1px 0 1px rgba(86,217,126,0.5),-1px 1px 0 1px rgba(86,217,126,0.5),1px 1px 0 1px rgba(0,223,166,0.75),-1px -1px 0 1px rgba(173,211,86,0.75)
}
.btn.green span {
	background:-webkit-linear-gradient(left,#add356,#00dfa6);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent
}
.btn.orange {
	box-shadow:0 1px 0 1px rgba(255,102,43,0.25),0 -1px 0 1px rgba(255,169,69,0.25),1px 0 0 1px rgba(255,102,43,0.25),-1px 0 0 1px rgba(255,169,69,0.25),1px -1px 0 1px rgba(255,136,56,0.5),-1px 1px 0 1px rgba(255,136,56,0.5),1px 1px 0 1px rgba(255,69,31,0.75),-1px -1px 0 1px rgba(255,203,82,0.75)
}
.btn.orange span {
	background:-webkit-linear-gradient(left,#ffcb52,#ff451f);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent
}
.btn.blue {
	-webkit-border-image:-webkit-linear-gradient(left,#3dade9,#bf2fcb) round;
	border-image-slice:1
}
.btn.blue span {
	background:-webkit-linear-gradient(left,#3dade9,#bf2fcb);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent
}
.btn:nth-of-type(1) {
	float:left
}
.btn:nth-of-type(2) {
	float:rightright
}
.btn:nth-of-type(3) {
	width:100%;
	clear:left;
	padding:.75em;
	font-size:3em;
	font-weight:100;
	line-height:1;
	letter-spacing:1px
}
* {
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
body {
	font:normal 1em 'Helvetica Neue', Helvetica,sans-serif;
	background:#1d2025;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility
}
.container {
	width:60%;
	margin:auto;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%)
}
.container:after {
	display:table;
	content:'';
	clear:both
}
a {
	color:inherit;
	text-decoration:none
}
h1.method1 {
	background:-webkit-linear-gradient(left,#ef0,#f00);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent
}

以上就是纯css3实现的颜色渐变按钮的代码。