css按鈕交互效果

最近在網上閒逛時，發現了http://www.nows.fun/ 這個毒雞湯，內容有趣，按鈕交互作的也很棒，簡約而不簡單。因而就把按鈕交互的效果拿來學習一下。 整體上來講，是利用了:active和box-shadow兩個特性來實現的。但願經過這個簡單效果，能讓更多的朋友喜歡上css. 首先來講一下:active，就是當用戶按住一個a標籤的時候的意思，鼠標點擊下去但沒有鬆開的時候就這樣樣子啦。 而後說一下box-shaow,就是元素的陰影效果，該屬性能夠讓幾乎全部元素的邊框產生陰影。利用這個效果來模擬按鈕塌陷。這部分代碼仍是比較簡單的，先整出來沒有加效果的按鈕

html代碼

<span class="btn">
  <a href="#" class="btn-text">
    CLICK ME PLEASE
  </a>
</span>
複製代碼

css代碼

.btn{
  display:inline-block;
  background:#1aaf5d;
  height:30px;
  line-height:30px;  
  text-align:center;
  border-radius:25px;
  font-weight:bold;
  letter-spacing:1px;
  padding:10px 15px;
}
.btn-text{
  color:#fff;
  text-decoration:none;
  padding:10px 16px;
  font-size:12px;
  border-radius: 16px;
}
複製代碼

看起來還挺像那麼回事

下面加上:active的css代碼，加上一點點深色的陰影，使之看起來就好像塌陷下去了同樣

.btn-text:active{
  box-shadow:inset 0 1px 2px #16665d;
}
複製代碼

怎麼樣，看起來還不錯吧。 原版的能夠去 www.nows.fun/ 看。

終極划水摸魚超級大懶蟲簡易版點擊這裏 codepen.io/Ritr/pen/dy…

參考連接： developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…