溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下使用CSS制作按鈕的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
今天的這篇文章中將給大家介紹四種按鈕的實現方法，其中包括普通的方形按鈕，圓角按鈕，立體按鈕和帶有簡單動畫的按鈕。
我們先來看一下普通方形按鈕的實現方法
按鈕代碼如下所示
HTML代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>普通方形按鈕</button> </body> </html>
圓角按鈕的實現方法
代碼如下
HTML代碼
<button class="kadomaru">圓角按鈕</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">立體按鈕</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制作按鈕的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
