CSS是現代網頁設計的必備技能之一，而其中一個非常基礎的操作就是設計按鈕的顏色變化。在這篇文章中，我們將學習如何使用CSS來實現按鈕顏色變化。

首先，我們需要一個HTML按鈕元素，如下所示：

<button>Click me</button>

接下來我們需要為這個按鈕添加CSS樣式來定義按鈕的顏色變化效果。在CSS中，最常用的是:hover偽類，它表示當鼠標移動到按鈕上時應該應用的樣式。我們可以使用:hover來改變按鈕的背景顏色，例如：

button:hover {
background-color: #ff0000;
}

上面的代碼表示當鼠標移動到按鈕上時，按鈕的背景顏色將會變成紅色。我們也可以加入其他的CSS屬性，例如改變文字顏色、增加陰影效果等等，以使按鈕看起來更加吸引人。

除了:hover，我們還可以使用:focus偽類來定義當按鈕被聚焦時的變化效果。例如，我們可以讓聚焦的按鈕邊框變成藍色：

button:focus {
border: 2px solid #0000ff;
}

最后，我們還可以使用active偽類來定義當按鈕被點擊時的變化效果。例如，我們可以讓被點擊的按鈕背景顏色變深：

button:active {
background-color: #800000;
}

以上就是CSS按鈕顏色變化的基本操作。通過使用:hover、:focus和:active偽類，我們可以輕松地為按鈕添加有趣的顏色變化效果，使網頁看起來更加生動。