之前我們也介紹過不少CSS3按鈕了，也有不少是基于HTML5的，比如8個(gè)時(shí)尚而簡約的HTML5按鈕這篇文章中就有不少經(jīng)典的按鈕插件。這次我們要分享的也是一款CSS3按鈕，它的特點(diǎn)是支持前后翻頁的樣式，按鈕邊框有一層淡淡的陰影，因此整體呈現(xiàn)清新的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);
}本站文章版權(quán)歸原作者及原出處所有 。內(nèi)容為作者個(gè)人觀點(diǎn)， 并不代表本站贊同其觀點(diǎn)和對其真實(shí)性負(fù)責(zé)，本站只提供參考并不構(gòu)成任何投資及應(yīng)用建議。本站是一個(gè)個(gè)人學(xué)習(xí)交流的平臺(tái)，網(wǎng)站上部分文章為轉(zhuǎn)載，并不用于任何商業(yè)目的，我們已經(jīng)盡可能的對作者和來源進(jìn)行了通告，但是能力有限或疏忽，造成漏登，請及時(shí)聯(lián)系我們，我們將根據(jù)著作權(quán)人的要求，立即更正或者刪除有關(guān)內(nèi)容。本站擁有對此聲明的最終解釋權(quán)。
