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

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

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

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

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

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