之前我们也介绍过不少CSS3按钮了,也有不少是基于HTML5的,比如8个时尚而简约的HTML5按钮这篇文章中就有不少经典的按钮插件。这次我们要分享的也是一款CSS3按钮,它的特点是支持前后翻页的样式,按钮边框有一层淡淡的阴影,因此整体呈现清新的3D外观。
HTML代码:
<div> <a class="button back" href="javascript:void(0)">Back</a> <a class="button next" href="javascript:void(0)">Next</a> </div> <div> <a class="button back" href="javascript:void(0)">Previous Slide</a> <a class="button next" href="javascript:void(0)">Next Slide</a> </div> <div> <a class="button" href="javascript:void(0)">Short</a> <a class="button" href="javascript:void(0)">A Really Long Button!</a> </div>
CSS代码:
.button { display: inline-block; position: relative; color: #888; text-shadow: 0 1px 0 rgba(255,255,255, 0.8); text-decoration: none; text-align: center; padding: 8px 12px; font-size: 12px; font-weight: 700; font-family: helvetica, arial, sans-serif; border-radius: 4px; border: 1px solid #bcbcbc; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.12); background-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%); background-image: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%); background-image: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%); } .button:hover { color: #555; } .button:active,.button:active:after,.button:active:before { -webkit-box-shadow: none; box-shadow: none; } /* Back Button */ .button.back { border-left: none; } .button.back:after { content: ''; position: absolute; height: 50%; width: 15px; border-left: 1px solid #bcbcbc; background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); left: -5px; top: 1px; -webkit-transform: skew(-35deg, 0); -moz-transform: skew(-35deg, 0); -o-transform: skew(-35deg, 0); -ms-transform: skew(-35deg, 0); transform: skew(-35deg, 0); } .button.back:before { content: ''; position: absolute; height: 48%; width: 15px; border-left: 1px solid #bcbcbc; bottom: 1px; left: -5px; -webkit-transform: skew(35deg, 0); -moz-transform: skew(35deg, 0); -o-transform: skew(35deg, 0); -ms-transform: skew(35deg, 0); transform: skew(35deg, 0); background-image: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); background-image: -moz-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); background-image: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); background-image: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); background-image: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); -webkit-box-shadow: -2px 1px 2px rgba(100,100,100,0.1); box-shadow: -2px 1px 2px rgba(100,100,100,0.1); } /* Next Button */ .button.next { border-right: none; } .button.next:after { content: ''; position: absolute; height: 48%; width: 15px; border-right: 1px solid #bcbcbc; background-image: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); background-image: -moz-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); background-image: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); background-image: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); background-image: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%); right: -5px; bottom: 1px; -webkit-transform: skew(-35deg, 0); -moz-transform: skew(-35deg, 0); -o-transform: skew(-35deg, 0); -ms-transform: skew(-35deg, 0); transform: skew(-35deg, 0); -webkit-box-shadow: 2px 1px 2px rgba(100,100,100,0.1); box-shadow: 2px 1px 2px rgba(100,100,100,0.1); } .button.next:before { content: ''; position: absolute; background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%); height: 50%; width: 15px; border-right: 1px solid #bcbcbc; top: 1px; right: -5px; -webkit-transform: skew(35deg, 0); -moz-transform: skew(35deg, 0); -o-transform: skew(35deg, 0); -ms-transform: skew(35deg, 0); transform: skew(35deg, 0); }
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。