纯CSS3打造精美按钮

墨蓝 2022-02-20 00:57 253阅读 0赞

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

![20130513214811131][]

实现两种风格的按钮，主要利用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按钮大集合 ][css3]

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

》[40+ CSS Buttons from codepen][40_ CSS Buttons from codepen]

》[CSS And CSS3 Buttons, 110 Best Sets !][CSS And CSS3 Buttons_ 110 Best Sets]

[Link 1]: http://gx.zptc.cn/whqet/button.html
[20130513214811131]: /images/20220220/294e76ebd69c40da9954f7ce5ae0e0a0.png
[codrops]: http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/
[css3]: http://www.w3cplus.com/resources/421.html
[40_CSS3]: http://www.gbin1.com/technology/css/20121031-css3-buttons-tutorials/
[40_ CSS Buttons from codepen]: http://www.saaraan.com/2013/01/40-css-buttons-from-codepen
[CSS And CSS3 Buttons_ 110 Best Sets]: http://www.webdesignshock.com/css-button