在 Web 開發過程中，我們經常需要使用按鈕作為用戶與頁面互動的方式之一。而對于一個優秀的按鈕設計來說，按鈕按下時應該有一個視覺反饋，讓用戶知道他們已經點擊過該按鈕。在 CSS 中，我們可以通過偽類選擇器來實現這個效果。
首先，在 HTML 中創建我們的按鈕：
接著，在 CSS 中定義我們的樣式：
在上面的代碼中，我們首先定義了一個類名為 myButton 的樣式，其中包括正常狀態下的顏色、字體、大小等屬性。接下來，在偽類選擇器 :active 中，我們改變了按鈕的背景顏色、陰影效果和位置，實現了按鈕按下的視覺效果。
使用 CSS 為按鈕添加按下變色效果是一種簡單而有效的方法，能夠提供良好的用戶體驗，增強網站的用戶交互性。我們可以通過針對不同的按鈕類別創建不同的 CSS 樣式，來使頁面風格更加多元化。
首先，在 HTML 中創建我們的按鈕：
<button class="myButton">Click me</button>
接著，在 CSS 中定義我們的樣式：
.myButton {
background-color: #4CAF50; /*正常顏色*/
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.myButton:active { /*按下效果*/
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}在上面的代碼中，我們首先定義了一個類名為 myButton 的樣式，其中包括正常狀態下的顏色、字體、大小等屬性。接下來，在偽類選擇器 :active 中，我們改變了按鈕的背景顏色、陰影效果和位置，實現了按鈕按下的視覺效果。
使用 CSS 為按鈕添加按下變色效果是一種簡單而有效的方法，能夠提供良好的用戶體驗，增強網站的用戶交互性。我們可以通過針對不同的按鈕類別創建不同的 CSS 樣式，來使頁面風格更加多元化。