纯CSS3打造精美按钮

利用CSS3实现精美按钮，效果如下图所示，也可以狠狠点击这里。前端开发whqet，关注前端开发技术 分享网页相关资源。

实现两种风格的按钮，主要利用box-shadow阴影实现3d风格的按钮，同时利用css的counter实现计数。

html结构非常简单，详细代码如下。

<div class="buttonContainer">
	<a href="#" class="btn">Number One</a>
	<a href="#" class="btn">Number Two</a>
	<a href="#" class="btn">Number Three</a>
	<a href="#" class="btnn">Number Four</a>
	<a href="#" class="btnn">Number Five</a>
	<a href="#" class="btnn">Number Six</a>
</div>

利用伪对象::before实现计数容器，利用阴影实现模拟3d效果，:hover和:active激活3d效果。

效果一的实现

.btn{
	display: block;
	position: relative;
	width: 160px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: linear-gradient(bottom, #0E8AB7, #16B1E9);
	margin: 60px;
	border-radius:3px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
	user-select:none;
}
.btn:before{
	content: counter(abc);
	width: 40px;
	height: 30px;
	line-height: 30px;
	position: absolute;
	left: -30px;
	top: 0;
	background: linear-gradient(bottom, #0A6181, #0D85B1);
	border-right:solid 1px #07526e;
	border-radius: 5px 0 0 5px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
	transition: left 1s ease;
}
.btn:hover:before{
	left: -40px;
}
.btn:active{
	top: 3px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 4px 2px #999;
}
.btn:active:before{
	top:-3px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999,4px 0 8px rgba(0,0,0,.3);
}

效果二的实现

.btnn{
	display: block;
	position: relative;
	width: 190px;
	height: 30px;
	line-height: 30px;
	text-indent: 36px;
	background: linear-gradient(bottom, #0E8AB7, #16B1E9);
	margin: 60px 0 0 30px;
	border-radius:5px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
	user-select:none;
}
.btnn:before{
	content: counter(abc);
	color: #fff;
	width: 18px;
	height: 18px;
	text-indent: 0;
	text-align: center;
	line-height: 18px;
	font-size: 12px;
	border-radius:50%;
	position: absolute;
	right: 8px;
	top: 8px;
	box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	background-color: #0E8AB7;
	transition: background-color .5s ease,box-shadow .5s ease;
}
.btnn:hover:before{
	background-color: transparent;
}
.btnn:active{
	top: 3px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 4px 2px #999;
}
.btnn:active:before{
	top:4px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e;
}

完工，感谢 codrops提供灵感。

资源推荐 

》css3按钮大集合 

》分享40个超棒的CSS3按钮教程

》40+ CSS Buttons from codepen

》CSS And CSS3 Buttons, 110 Best Sets !