在網頁設計中，按鈕是一個很常見的元素，可以用于用戶交互、提交表單等操作。為了提升用戶體驗，讓按鈕有更好的視覺效果，我們可以使用CSS3來實現按鈕的顏色變化。 首先，在HTML中創建一個按鈕元素。比如：

<button>點擊按鈕</button>

接下來，在CSS中對按鈕進行樣式設置：

p {
font-size: 24px;
}
button {
background-color: #007bff;  // 初始顏色為藍色
border: none;
color: white;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 0;
cursor: pointer;
}
button:hover {
background-color: #0062cc;  // 懸停時顏色變為深藍
}
button:active {
background-color: #005cbf;  // 點擊時顏色變為更深的藍
}

以上代碼中，我們為按鈕設置了初始顏色為藍色，當鼠標懸停在按鈕上時，顏色會變為更深的藍色；當用戶點擊按鈕時，顏色又會變為更深的藍色，以給用戶反饋。 CSS中我們使用:hover選擇器來實現懸停時的樣式，使用:active選擇器來實現點擊時的樣式。這樣，我們就可以為按鈕添加一個簡單而有用的功能，提高用戶的交互體驗。