今天的這篇文章中將給大家介紹四種按鈕的實現方法,其中包括普通的方形按鈕,圓角按鈕,立體按鈕和帶有簡單動畫的按鈕,下面我們來看具體的內容。
我們先來看看普通方形按鈕的實作方法
按鈕程式碼如下圖
HTML程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>普通方形如何使用CSS製作按鈕</button> </body> </html>
圓角按鈕的實作方法
程式碼如下
HTML程式碼
<button class="kadomaru">圆角如何使用CSS製作按鈕</button>
CSS程式碼
.kadomaru { width:100px; font-size:12px; color:#FFFFFF; text-align:center; display:block; padding:10px 0 10px; background:#6BCBF6; border-radius: 20px; }
立體按鈕的實作方法
程式碼如下
HTML代碼
<button class="shadow">立体如何使用CSS製作按鈕</button>
CSS代碼
.shadow { width:100px; font-size:12px; color:#FFFFFF; text-align:center; display:block; padding:10px 0 10px; background:#6BCBF6; border-radius:5px; box-shadow:1px 1px #1A6EA0; }
使用box-shadow指定陰影大小和陰影顏色,營造立體的感覺。
上述三種方法實現的按鈕效果如下
#最後一個是帶有簡單動畫的按鈕實現,我們來看具體的範例
程式碼如下
HTML程式碼
<div class="animation"> <div class="effect"></div> <a href="#"> Touch me </a>
CSS程式碼
.animation { width:100px; height:50px; text-align:center; border:2px solid #BBBBBB; float:left; cursor:pointer; position:relative; box-sizing:border-box; overflow:hidden; margin:0 0 40px 0; } .animation a { font-family:arial; font-size:12px; color:#BBBBBB; text-decoration:none; line-height:50px; transition:all .10s ease; z-index:2; position:relative; } .effect { width:140px; height:50px; top:-2px; left:-140px; background:#BBBBBB; position:absolute; transition:all .5s ease; z-index:1; } .animation:hover .effect { left:0; } .animation:hover a { color:#FFFFFF; }
介紹客製化的一個範例的話,將.effect的left屬性變成right屬性,並將.animation:hover .effect的left屬性變更為right屬性,可以變成向右的動畫。
當執行上述程式碼時瀏覽器上顯示如下效果:
#將滑鼠放在按鈕上則會有一個向右的動畫,顯示效果如下
本篇文章到這裡就已經全部結束了,有關CSS中按鈕的製作方法大家可以移步到CSS影片教學或CSS3影片教學專欄進一步學習! ! !
以上是如何使用CSS製作按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章!