CSS按鈕可以有多個狀態,例如默認狀態、鼠標懸停狀態、激活狀態、禁用狀態等等。這些狀態可以通過偽類選擇器來為按鈕添加不同的樣式。
/* 默認狀態 */ 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; } /* 鼠標懸停狀態 */ button:hover { background-color: #3e8e41; } /* 激活狀態 */ button:active { background-color: #4CAF50; box-shadow: 0 5px #666; transform: translateY(4px); } /* 禁用狀態 */ button:disabled { opacity: 0.6; cursor: not-allowed; }
在默認狀態下,按鈕的背景顏色是綠色,字體顏色是白色,沒有邊框,有一定內邊距和外邊距。當鼠標懸停在按鈕上時,背景顏色會變為深綠色。在用戶激活按鈕(例如點擊)時,按鈕會有一個陰影和向下偏移的效果,同時背景顏色也會變成默認顏色。若按鈕被禁用,則按鈕會變成半透明,無法再次點擊。