使用CSS制作按鈕的方法-創(chuàng)新互聯(lián)

小編給大家分享一下使用CSS制作按鈕的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了德江免費建站歡迎大家使用！

今天的這篇文章中將給大家介紹四種按鈕的實現(xiàn)方法，其中包括普通的方形按鈕，圓角按鈕，立體按鈕和帶有簡單動畫的按鈕。

使用CSS制作按鈕的方法

我們先來看一下普通方形按鈕的實現(xiàn)方法

按鈕代碼如下所示

HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<button>普通方形按鈕</button>
</body>
</html>

圓角按鈕的實現(xiàn)方法

代碼如下

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

立體按鈕的實現(xiàn)方法

代碼如下

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指定陰影大小和陰影顏色，營造立體的感覺。

上述三種方法實現(xiàn)的按鈕效果如下

使用CSS制作按鈕的方法

最后一個是帶有簡單動畫的按鈕實現(xiàn)，我們來看具體的示例

代碼如下

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屬性，可以變成向右的動畫。

當執(zhí)行上述代碼時瀏覽器上顯示如下效果：

使用CSS制作按鈕的方法

將鼠標放在按鈕上則會有一個向右的動畫，顯示效果如下

使用CSS制作按鈕的方法

以上是使用CSS制作按鈕的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

當前題目：使用CSS制作按鈕的方法-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article28/depijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、服務(wù)器托管、App設(shè)計、微信小程序、App開發(fā)、品牌網(wǎng)站建設(shè)

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

猜你還喜歡下面的內(nèi)容