CSS實現按鈕點擊后根據背景色加深效果-一顆優雅草bigniu

具體代碼如下

 

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日記錄