css按钮交互效果

2019年9月14日 176次阅读 来源: 小王子

最近在网上闲逛时，发现了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;
}

《css按钮交互效果》
看起来还挺像那么回事

下面加上:active的css代码，加上一点点深色的阴影，使之看起来就好像塌陷下去了一样

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

《css按钮交互效果》

怎么样，看起来还不错吧。
原版的可以去http://www.nows.fun/ 看。
终极划水摸鱼超级大懒虫简易版点击这里
https://codepen.io/Ritr/pen/d…

参考链接：
https://developer.mozilla.org…

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

    原文作者：小王子
    原文地址: https://segmentfault.com/a/1190000020094187
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞