CSS中的表單按鈕是網頁設計中非常重要的一部分,通過這些按鈕,用戶可以向網站提交信息或完成某些操作。通過CSS,我們可以輕松地自定義這些按鈕的樣式,使它們更加符合我們的設計風格。
/* 基礎樣式 */ input[type="submit"], input[type="reset"], input[type="button"] { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } /* 鼠標懸停樣式 */ input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background-color: #3e8e41; } /* 禁用狀態樣式 */ input[type="submit"]:disabled, input[type="reset"]:disabled, input[type="button"]:disabled { opacity: 0.6; cursor: not-allowed; } /* 自定義樣式 */ .my-btn { background-color: #007bff; color: #fff; border-radius: 5px; font-size: 18px; padding: 8px 20px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); }
以上是一些基本的表單按鈕樣式,我們可以通過修改樣式表中的屬性來實現自定義按鈕,例如修改背景顏色、字體顏色、邊框樣式、鼠標懸停效果等。在實際應用中,我們可以為不同的按鈕定義不同的樣式類,從而實現更多的自由度。
如上方代碼所示,我們可以給HTML元素添加自定義的樣式類,以實現更加個性化的按鈕樣式。