CSS中實現(xiàn)按鈕按下變色效果的方法

在CSS中，我們可以使用:active偽類來實現(xiàn)按鈕按下變色效果。:active偽類用于描述元素被用戶激活的狀態(tài)，比如按下按鈕或鏈接。

下面是一個簡單的示例，展示如何使用CSS為按鈕添加按下變色效果：

HTML代碼：

<button class="my-button">點擊我</button>

CSS代碼：

.my-button {
  background-color: #ccc;
  color: #333;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.my-button:active {
  background-color: #999;
  color: #fff;
}

在這個示例中，我們?yōu)榘粹o添加了一個類名my-button，在CSS中，我們定義了my-button的樣式，包括背景顏色、文字顏色、內(nèi)邊距和邊框，我們使用:active偽類來定義按鈕被按下時的樣式，即背景顏色變?yōu)樯罨疑?，文字顏色變?yōu)榘咨?/p>

這樣，當用戶按下按鈕時，就會觸發(fā):active偽類，使按鈕的顏色發(fā)生變化，從而實現(xiàn)按下變色效果。