CSS按鈕是網(wǎng)頁(yè)設(shè)計(jì)中最常用的元素之一。通過(guò)對(duì)按鈕的樣式和交互行為的設(shè)置，可以增加網(wǎng)頁(yè)的美觀性和用戶體驗(yàn)。

其中一個(gè)常用的交互效果是點(diǎn)擊按鈕時(shí)，按鈕背景顏色發(fā)生變化。這種效果可以通過(guò)CSS的:hover偽類來(lái)實(shí)現(xiàn)，同時(shí)結(jié)合:active偽類可以使按鈕在被點(diǎn)擊時(shí)保持背景色。

下面是一個(gè)簡(jiǎn)單的CSS按鈕點(diǎn)擊背景變色的代碼實(shí)現(xiàn)：

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover, .button:active {
background-color: #3e8e41;
}

在這個(gè)代碼中，.button類定義了按鈕的基本樣式，包括背景色、字體顏色、邊框、內(nèi)邊距等。當(dāng)鼠標(biāo)懸停在按鈕上或按鈕被點(diǎn)擊時(shí)，:hover和:active偽類分別給按鈕添加了新的背景色。

這樣設(shè)置后，當(dāng)用戶點(diǎn)擊按鈕時(shí)，按鈕會(huì)在短暫的時(shí)間內(nèi)保持新的背景色，告訴用戶已經(jīng)成功點(diǎn)擊了按鈕，增加交互的可感知性。