首页手记 CSS实现按钮点击后根据背景色加深效果-一颗优雅草bi...

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

标签：

Html5 CSS3

具体代码如下

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日记录

点击查看更多内容