CSS按鈕可以有多個狀態(tài),例如默認狀態(tài)、鼠標懸停狀態(tài)、激活狀態(tài)、禁用狀態(tài)等等。這些狀態(tài)可以通過偽類選擇器來為按鈕添加不同的樣式。
/* 默認狀態(tài) */ button { background-color: #4CAF50; color: white; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } /* 鼠標懸停狀態(tài) */ button:hover { background-color: #3e8e41; } /* 激活狀態(tài) */ button:active { background-color: #4CAF50; box-shadow: 0 5px #666; transform: translateY(4px); } /* 禁用狀態(tài) */ button:disabled { opacity: 0.6; cursor: not-allowed; }
在默認狀態(tài)下,按鈕的背景顏色是綠色,字體顏色是白色,沒有邊框,有一定內(nèi)邊距和外邊距。當鼠標懸停在按鈕上時,背景顏色會變?yōu)樯罹G色。在用戶激活按鈕(例如點擊)時,按鈕會有一個陰影和向下偏移的效果,同時背景顏色也會變成默認顏色。若按鈕被禁用,則按鈕會變成半透明,無法再次點擊。