码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu

时间:2020-02-19 20:50:41      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:highlight   abs   根据   width   back   active   isp   :active   position   

具体代码如下

 

button{
    position: relative;
}
button:active::before {
  display: block;
  content: ‘‘;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 5%)
}

 

如果是自定义DIV也是可以用同样方法的,可以改为

 

.btn{

position: relative;

}

/**这里的active为选中的状态,可以根据情况修改**/

.btn:active::before {
  display: block;
  content: ‘‘;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 5%)
}
 

 

 

CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu 2020年2月19日记录

CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu

标签:highlight   abs   根据   width   back   active   isp   :active   position   

原文地址:https://www.cnblogs.com/yangqiangche/p/12332873.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!