CSS點擊改變背景顏色

/* HTML代碼 */
<button id="btn">點擊改變背景顏色</button>
/* CSS代碼 */
#btn {
background-color: blue; /* 按鈕背景色設置為藍色 */
color: white; /* 文字顏色設置為白色 */
padding: 10px 20px; /* 內邊距設置為10像素上下，20像素左右 */
border: none; /* 去掉按鈕邊框 */
cursor: pointer; /* 鼠標懸浮在按鈕上時顯示手的形狀 */
}
#btn:hover {
background-color: red; /* 鼠標懸浮在按鈕上時，背景顏色變為紅色 */
}
#btn:active {
background-color: green; /* 鼠標點擊按鈕時，背景顏色變為綠色 */
}

這是一個簡單的CSS代碼段，實現了點擊按鈕可以改變背景顏色的效果。這里使用了偽類:hover和:active，分別用于當鼠標懸浮在按鈕上和點擊按鈕時改變樣式。

我們可以根據需要通過修改CSS代碼中的顏色值來展現不同的按鈕樣式。例如，將background-color的值改為yellow就可以展示黃色按鈕。同樣，可以通過修改padding值來調整按鈕的大小，border值來設置邊框的樣式等。