純CSS3彩色邊線3D立體按鈕製作教程

來源:互聯網
上載者:User

今天我們來分享一款利用純CSS3實現的3D按鈕,這款按鈕的一個特點是有彩色的邊線,這讓整個按鈕顯得比較多姿多彩,沒那麼枯燥無趣。本文不僅可以讓大家看到示範效果,而且我們把製作教程也分享出來,首先來看看效果圖:

我們也可以在這裡看到這些按鈕的DEMO示範。

接下來就來分享一下製作教程以及原始碼,按鈕的原始碼主要由HTML和CSS兩部分程式碼群組成,先來看看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>£80</p>      <i class="icon-chevron-right"></i>    </div>  </button>  <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>£35</p>      <i class="icon-chevron-right"></i>    </div>  </button>  <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>£60</p>      <i class="icon-chevron-right"></i>    </div>  </button>  <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>£100</p>      <i class="icon-chevron-right"></i>    </div>  </button>

可以看到,HTML代碼的結構也非常清楚,沒有HTML5的元素,一個button和幾個div元素而已。

這裡我們定義了4個按鈕,就像效果圖上一樣,每一個按鈕都有不同顏色的邊線,具體我們會在CSS代碼中實現3D效果和邊線效果。

接下來是CSS代碼,先對所有的button進行統一樣式的渲染:

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;}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的效果。

然後就是對每個按鈕的邊線顏色以及滑鼠滑過和按鈕按下的樣式進行定義:

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%);}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%);}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%);}

主要的代碼就是這些,所有的原始碼也分享了,下載地址>>



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。