今天小编跟大家讲解下有关css按钮交互效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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/
来自：https://segmentfault.com/a/1190000020094187来源：爱蒂网
