CSS長按變色是一種常見的交互設(shè)計效果，通過CSS屬性:hover和:active實現(xiàn)。當用戶長按某個元素時，其顏色將發(fā)生改變，從而增強用戶體驗。

/* 普通狀態(tài) */
.btn {
background-color: #3498db;
color: #fff;
padding: 15px 25px;
border-radius: 5px;
transition: all 0.3s ease;
}
/* 長按狀態(tài) */
.btn:active {
background-color: #2980b9;
}

如上所示，我們針對.btn類編寫了兩種狀態(tài)，普通狀態(tài)下按鈕背景色為#3498db，字體顏色為#fff。當用戶長按按鈕時，按鈕背景顏色會發(fā)生變化，變成#2980b9。

需要注意的是，:active偽類只在用戶按下并在按下期間保持激活狀態(tài)，直到抬起手指時才釋放。因此，.btn:active樣式只在用戶按下按鈕時生效，松開手指后自動恢復(fù)為普通狀態(tài)。如果我們還想要增加一種效果，使按鈕在鼠標懸停在其上方時發(fā)生改變，可以再次使用:hover偽類。

/* 長按狀態(tài) */
.btn:active {
background-color: #2980b9;
}
/* 鼠標懸停狀態(tài) */
.btn:hover {
background-color: #2ecc71;
}

如上所示，在.btn類上同時應(yīng)用:active和:hover偽類，以增強按鈕的交互效果。這里，我們設(shè)置.button:hover樣式為按鈕的背景顏色為#2ecc71，當用戶將鼠標懸停在按鈕上方時，按鈕顏色將從普通狀態(tài)的#3498db變?yōu)?2ecc71。當用戶按下按鈕時，按鈕的背景顏色將變?yōu)椋?2980b9，從而提高了按鈕的交互響應(yīng)率和用戶體驗。