css3中怎么制作一個(gè)彩色邊線3d立體按鈕，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

十余年的會(huì)同網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整會(huì)同建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“會(huì)同網(wǎng)站設(shè)計(jì)”,“會(huì)同網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

HTML代碼

代碼如下:

<button class="blue">
   <div class="wrapper">
     <header>Teach me to fly like Superman and woo Lois Lane</header>
     <div class="data"><em>Superpowers</em> <i class="icon-time"></i> exp: <span>Apr 18, 1938</span></div>
     <p>&pound;80</p>
     <i class="icon-chevron-right"></i>
   </div>
 </button></p> <p>  <button class="green">
   <div class="wrapper">
     <header>Teach me to play ukulele like Israel Kamakawiwo'ole</header>
     <div class="data"><em>Music</em> <i class="icon-time"></i> exp: <span>May 20, 1959</span></div>
     <p>&pound;35</p>
     <i class="icon-chevron-right"></i>
   </div>
 </button></p> <p>  <button class="red">
   <div class="wrapper">
     <header>Teach me to be a javascript ninja like Mr Doob</header>
     <div class="data"><em>Web Development</em> <i class="icon-time"></i> exp: <span>Apr 1, 2010</span></div>
     <p>&pound;60</p>
     <i class="icon-chevron-right"></i>
   </div>
 </button></p> <p>  <button>
   <div class="wrapper">
     <header>Teach me to cook like The Hairy Bikers</header>
     <div class="data"><em>Cooking</em> <i class="icon-time"></i> exp: <span>Jul 07, 2013</span></div>
     <p>&pound;100</p>
     <i class="icon-chevron-right"></i>
   </div>
 </button>

可以看到，HTML代碼的結(jié)構(gòu)也非常清楚，沒有HTML5的元素，一個(gè)button和幾個(gè)div元素而已。

這里我們定義了4個(gè)按鈕，就像效果圖上一樣，每一個(gè)按鈕都有不同顏色的邊線，具體我們會(huì)在CSS代碼中實(shí)現(xiàn)3D效果和邊線效果。

接下來是CSS代碼，先對(duì)所有的button進(jìn)行統(tǒng)一樣式的渲染：

代碼如下:

button {
 display: block;
 float: left;
 margin: 0 0 1rem 0;
 padding: 0;
 border: 0;
 height: 5rem;
 width: 25rem;
 border-radius: 0.4rem;
 position: relative;
 background: transparent;
 outline: none;
}</p> <p>button .wrapper {
 display: block;
 float: left;
 background: #fff;
 border: 0;
 height: 5rem;
 width: 25rem;
 border-radius: 0.4rem;
 position: relative;
 box-shadow: inset 0 -0.3rem 0 0 rgba(0, 0, 0, 0.2), 0 0.1rem 0 0 rgba(0, 0, 0, 0.2);
 transition: height 0.08s, margin 0.08s, box-shadow 0.08s, background 0.08s;
 background: -moz-linear-gradient(0deg, #4d4d4d 0%, #4d4d4d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #4d4d4d 0%, #4d4d4d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #4d4d4d 0%, #4d4d4d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button .wrapper:hover {
 background: -moz-linear-gradient(0deg, #333333 0%, #333333 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #333333 0%, #333333 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #333333 0%, #333333 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button .wrapper:active {
 margin-top: 0.3rem;
 height: 4.7rem;
 box-shadow: none;
}

大家可以看到，所有按鈕的基本外觀就出來了，包括3D的效果。

然后就是對(duì)每個(gè)按鈕的邊線顏色以及鼠標(biāo)滑過和按鈕按下的樣式進(jìn)行定義：

代碼如下:

button.blue .wrapper {
 background: -moz-linear-gradient(0deg, #7db2e8 0%, #7db2e8 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #7db2e8 0%, #7db2e8 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #7db2e8 0%, #7db2e8 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button.blue .wrapper:hover {
 background: -moz-linear-gradient(0deg, #5299e0 0%, #5299e0 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #5299e0 0%, #5299e0 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #5299e0 0%, #5299e0 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}</p> <p>button.green .wrapper {
 background: -moz-linear-gradient(0deg, #c4e87d 0%, #c4e87d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #c4e87d 0%, #c4e87d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #c4e87d 0%, #c4e87d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button.green .wrapper:hover {
 background: -moz-linear-gradient(0deg, #b1e052 0%, #b1e052 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #b1e052 0%, #b1e052 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #b1e052 0%, #b1e052 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}</p> <p>button.red .wrapper {
 background: -moz-linear-gradient(0deg, #e87d7d 0%, #e87d7d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #e87d7d 0%, #e87d7d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #e87d7d 0%, #e87d7d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button.red .wrapper:hover {
 background: -moz-linear-gradient(0deg, #e05252 0%, #e05252 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #e05252 0%, #e05252 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #e05252 0%, #e05252 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}

看完上述內(nèi)容，你們掌握css3中怎么制作一個(gè)彩色邊線3d立體按鈕的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文名稱：css3中怎么制作一個(gè)彩色邊線3d立體按鈕-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://m.newbst.com/article36/dsgipg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)