在網(wǎng)頁開發(fā)中，經(jīng)常需要實(shí)現(xiàn)一些交互效果。其中一種很常見的效果就是點(diǎn)擊按鈕后按鈕變色。這個(gè)效果的實(shí)現(xiàn)需要用到CSS。

首先，在HTML代碼中創(chuàng)建一個(gè)按鈕元素，并給它一個(gè)唯一的ID：

<button id="myButton">點(diǎn)擊按鈕</button>

接下來，在CSS中定義按鈕的樣式。我們需要給按鈕定義兩個(gè)不同的顏色：一個(gè)初始顏色和一個(gè)點(diǎn)擊后的顏色。這可以通過定義兩個(gè)不同的CSS類來實(shí)現(xiàn)：

.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button-clicked {
background-color: #E84C3D;
}

上面的代碼中，.button類定義了按鈕的初始樣式，.button-clicked類定義了按鈕被點(diǎn)擊后的樣式。我們可以看到，.button-clicked類中的背景顏色已經(jīng)變成了紅色。

最后，我們需要使用JavaScript來處理按鈕的點(diǎn)擊事件，并添加/刪除button-clicked類，以改變按鈕的樣式。以下是一個(gè)簡(jiǎn)單的JavaScript腳本：

document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("myButton").classList.toggle("button-clicked");
});

上面的代碼中，我們使用addEventListener方法將一個(gè)點(diǎn)擊事件綁定到按鈕上。這個(gè)事件觸發(fā)時(shí)，我們會(huì)切換button-clicked類的存在，從而改變按鈕的樣式。