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