最近在网上闲逛的时候，发现了http://www.nows.fun/这个毒鸡汤，内容很有趣，按钮交互也很好，简约而不简单。于是就用按钮交互的效果来学习。一般来说，它是通过使用两个特性来实现的：active和box-shadow。希望通过这个简单的效果，让更多的朋友喜欢上css。首先说一下：active，意思是当用户按下并按住一个a标签，鼠标被点击但没有松开时是这个样子的。然后说box-shaow，就是元素的阴影效果。这个属性可以让几乎所有元素的边框都产生阴影。使用此效果来模拟按钮折叠。这部分代码比较简单。首先，在不添加效果的情况下完成按钮的html代码。请点击我csscode.btn{display:inline-block;背景：#1aaf5d；高度：30px；行高：30px；文本对齐：居中；边框半径：25px；字体粗细：粗体；字母间距：1px；填充：10px15px;}.btn-text{颜色：#fff;文字装饰：无；填充：10px16px；字体大小：12px；border-radius:16px;}看起来像在下面添加：activecss代码，添加一点深色阴影，使它看起来像折叠了一样。btn-text:active{box-shadow:inset01px2px#16665d;}怎么样，看起来不错。你可以去http://www.nows.fun/看原版。极简版的划水鱼超级懒bug点这里https://codepen.io/Ritr/pen/d...参考链接：https://developer.mozilla.org...https://developer。mozilla.org...：活动
