使用CSS制作按鈕的方法

發(fā)布時(shí)間：2020-08-29 11:19:44 來源：億速云閱讀：221 作者：小新欄目：web開發(fā)

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

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

使用CSS制作按鈕的方法

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

按鈕代碼如下所示

HTML代碼

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

圓角按鈕的實(shí)現(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;
}

立體按鈕的實(shí)現(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指定陰影大小和陰影顏色，營造立體的感覺。

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

使用CSS制作按鈕的方法

最后一個(gè)是帶有簡單動(dòng)畫的按鈕實(shí)現(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;
}

介紹定制的一個(gè)例子的話，將.effect的left屬性變成right屬性，并將.animation:hover .effect的left屬性變更為right屬性，可以變成向右的動(dòng)畫。

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

使用CSS制作按鈕的方法

將鼠標(biāo)放在按鈕上則會(huì)有一個(gè)向右的動(dòng)畫，顯示效果如下

使用CSS制作按鈕的方法

以上是使用CSS制作按鈕的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

使用CSS制作按鈕的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽