在網頁設計中，經常需要用到按鈕，而按鈕的樣式設計也是非常重要的一個環節。今天，我們來介紹一種點擊按鈕改變顏色的方法，讓你的按鈕動起來。

我們使用HTML和CSS來實現這個效果。首先，讓我們創建以下HTML結構，其中包含一個按鈕：

<button class="change-color">點擊改變顏色</button>

接下來，我們使用CSS來定義按鈕的樣式，其中包括它的背景顏色和字體顏色：

button {
background-color: #4CAF50; /* 綠色背景 */
color: white; /* 白色字體 */
padding: 10px; /* 按鈕內邊距 */
border: none; /* 沒有邊框 */
border-radius: 6px; /* 圓角邊框 */
}
button:hover {
background-color: #3e8e41; /* 鼠標懸停時背景顏色 */
color: white; /* 鼠標懸停時字體顏色 */
}
button.change-color {
background-color: #4CAF50; /* 綠色背景 */
color: white; /* 白色字體 */
}
button.change-color.clicked {
background-color: #ff0000; /* 紅色背景 */
color: white; /* 白色字體 */
}

通過以上代碼，我們定義了一個綠色背景、白色字體的按鈕，并給它加了圓角邊框。當鼠標懸停在按鈕上時，背景顏色和字體顏色都會變為深綠色。

但是，這并不是我們想要的效果。我們需要的是點擊按鈕時，按鈕的顏色會發生改變。為了實現這個效果，我們需要使用JavaScript。

以下是我們添加的JavaScript代碼，使得我們的按鈕能夠在點擊時變為紅色：

var changeColorButton = document.querySelector('.change-color');
changeColorButton.addEventListener('click', function() {
changeColorButton.classList.toggle('clicked');
});

通過這段代碼，我們選擇了擁有類名“change-color”的按鈕，并在其中添加了“click”事件監聽器。當用戶點擊按鈕時，我們使用“toggle”方法切換“clicked”類的存在，從而改變按鈕的顏色。

現在我們完成了整個效果的實現。我們給按鈕添加一個“change-color”類名，再給它添加一個“clicked”類名，我們就可以看到點擊后按鈕的顏色發生了改變。

以上就是實現點擊按鈕改變顏色的全部代碼和步驟。希望對你有所幫助！