css按钮交互效果

hsluoyz 发布于2019-08-30 15:44 / 2575人阅读

摘要：最近在网上闲逛时，发现了这个毒鸡汤，内容有趣，按钮交互做的也很棒，简约而不简单。于是就把按钮交互的效果拿来学习一下。然后说一下就是元素的阴影效果，该属性可以让几乎所有元素的边框产生阴影。利用这个效果来模拟按钮塌陷。

最近在网上闲逛时，发现了http://www.nows.fun/ 这个毒鸡汤，内容有趣，按钮交互做的也很棒，简约而不简单。于是就把按钮交互的效果拿来学习一下。
总体上来说，是利用了:active和box-shadow两个特性来实现的。希望通过这个简单效果，能让更多的朋友喜欢上css.
首先来说一下:active，就是当用户按住一个a标签的时候的意思，鼠标点击下去但没有松开的时候就这样样子啦。
然后说一下box-shaow,就是元素的阴影效果，该属性可以让几乎所有元素的边框产生阴影。利用这个效果来模拟按钮塌陷。这部分代码还是比较简单的，先整出来没有加效果的按钮

html代码


  
    CLICK ME PLEASE

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

云服务器 GPU云服务器 html交互式效果 css效果 android按钮效果 js与css交互

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116280.html

转：CSS :placeholder-shown伪类实现Material Design占位符交互效果

摘要：转自伪类实现占位符交互效果一规范中占位符交互效果风格占位符交互效果官方示意见此页面。我们可以采用绝对定位最后，对这个元素在输入框时候，以及非显示的时候进行重定位缩小并位移到上方四清除按钮部分上是必要属性，配合伪类实现我们的效果。转自： https://github.com/yougola/bl... CSS :placeholder-shown伪类实现Material Design占...

gaara 2019-08-30 15:44 评论0 收藏0
前端每日实战：5# 视频演示如何用 CSS 创作一个立体滑动 toggle 交互控件

摘要：效果预览按下右侧的点击预览按钮在当前页面预览，点击链接全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbyv7?w=500&h=500); 效果预览按下右侧的点击预览按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/...

hosition 2019-08-29 15:12 评论0 收藏0
前端每日实战：5# 视频演示如何用 CSS 创作一个立体滑动 toggle 交互控件

摘要：效果预览按下右侧的点击预览按钮在当前页面预览，点击链接全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbyv7?w=500&h=500); 效果预览按下右侧的点击预览按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/...

yy736044583 2019-08-02 10:18 评论0 收藏0
前端每日实战：9# 视频演示如何用纯 CSS 创作一种按钮被瞄准的交互特效

摘要：效果预览按下右侧的点击预览按钮在当前页面预览，点击链接全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbb1Vv?w=500&h=500); 效果预览按下右侧的点击预览按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/...

solocoder 2019-08-29 15:15 评论0 收藏0