CSS按鍵背景漸漸增多是一種常用的效果，可以讓用戶在點(diǎn)擊某個(gè)按鈕時(shí)，背景色漸漸變深，增強(qiáng)用戶的反饋感。下面我們來看一下如何實(shí)現(xiàn)這種效果。

.btn {
position: relative;
display: inline-block;
padding: 10px 20px;
border-radius: 50px;
color: #fff;
background-color: #007bff;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.4);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.btn:hover, .btn:focus {
background-color: #0069d9;
}
.btn:hover::after, .btn:focus::after {
opacity: 1;
}

首先，我們?yōu)榘粹o元素設(shè)置了基本樣式，包括圓角、背景色等。然后，我們?cè)偈褂脗卧?:after為按鈕元素添加一個(gè)背景色變化的效果。在默認(rèn)狀態(tài)下，偽元素的不透明度為0，表示沒有效果。當(dāng)用戶將鼠標(biāo)懸停在按鈕上或者聚焦在按鈕上時(shí)，按鈕背景顏色會(huì)逐漸變深，同時(shí)偽元素的不透明度也逐漸變?yōu)?，表示一個(gè)背景色漸變的效果。

這種效果不僅僅可以用在按鈕上，還可以用在其他需要交互的元素上，比如鏈接、輸入框等。只需要按照上述的方式給元素添加偽元素，然后設(shè)置相應(yīng)的樣式即可。