按鈕是網頁中最重要的元素之一，它是與用戶交互的主要途徑之一。當用戶在鼠標或觸摸屏上點擊按鈕時，我們通常會給按鈕加上顏色效果，以便讓用戶知道按鈕已被單擊并且網頁正在響應。在CSS中，我們可以使用:hover偽類和:active偽類來實現這個效果。 :hover偽類用于當用戶將鼠標移動到按鈕上時改變按鈕的樣式。例如，當我們想讓按鈕變成藍色背景和白色字體時，可以使用以下CSS代碼： ``` button:hover { background-color: blue; color: white; } ``` 上述代碼指出，當用戶把鼠標移動到按鈕上方時，按鈕的背景色將變成藍色，并且字體顏色將變成白色。這種效果會讓用戶感到按鈕非常互動和響應。 :active偽類用于當用戶按下鼠標或觸摸屏時改變按鈕的樣式。例如，當我們想讓按鈕在被單擊時變成深藍色背景和白色字體時，可以使用以下CSS代碼： ``` button:active { background-color: darkblue; color: white; } ``` 上述代碼指出，當用戶單擊按鈕時，按鈕的背景色將變成深藍色，并且字體顏色將變成白色。這種效果會讓用戶感到按鈕被單擊了一次，網頁正在響應。 總之，使用:hover偽類和:active偽類在CSS中更改按鈕的顏色是一種方便的方法，可以使用戶在與網頁交互的過程中感到更加互動和響應。在編寫CSS代碼時，我們可以使用pre標簽來保持代碼的格式和排版，以便更好地閱讀和理解。