在網頁設計中，按鈕是非常重要的元素之一。當我們使用鼠標或者手指輕觸一個按鈕時，視覺反饋是非常必要的，這樣才能讓用戶知道按鈕是否已經被按下，并且如何與頁面進行交互。那么如何通過CSS來實現按鈕點擊時顏色的變化呢？

.button {
background-color: #f5f5f5;
border: none;
color: #000;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:active {
background-color: #d0d0d0;
}

我們可以先定義一個按鈕的基本樣式，然后使用CSS的偽類:active來實現按鈕被按下時的顏色變化。在上面的代碼中，我們通過設置按鈕的background-color屬性來實現顏色的變化，同時還可以調整按鈕的其他樣式以達到更好的效果。

值得注意的是，:active偽類只能在按鈕被按下時才會觸發，一旦鼠標或手指離開按鈕，按鈕的樣式就會恢復到原來的狀態。因此，如果想要實現按鈕一旦被點擊就一直保持顏色不變的效果，我們需要使用JavaScript來編寫對應的邏輯代碼。