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

怎麼樣，看起來還不錯吧。
原版的可以去http://www.nows.fun/ 看。
終極划水摸魚超級大懶蟲簡易版點擊這裏
https://codepen.io/Ritr/pen/d...

參考鏈接：
https://developer.mozilla.org...

https://developer.mozilla.org...:active