下面是一個簡單的 CSS 按鈕樣式示例,它使用了一個按鈕樣式類,該類定義了按鈕的基本樣式:
```css
button {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
button:hover {
background-color: #3e8e41;
在這個示例中,按鈕的樣式包括以下屬性:
- `background-color`:按鈕的背景顏色。
- `color`:按鈕的文本顏色。
- `padding`:按鈕的邊距。
- `border`:按鈕的邊框。
- `border-radius`:按鈕的圓角半徑。
- `cursor`:按鈕的指針狀態。
- `font-size`:按鈕的字體大小。
這些屬性可以單獨使用或組合使用,以創建不同類型的按鈕。例如,我們可以使用 `padding` 屬性來增加按鈕的邊距,使用 `border-radius` 屬性來增加按鈕的圓角半徑,或使用 `font-size` 屬性來改變按鈕的字體大小。
使用 CSS 按鈕樣式可以大大提高用戶體驗,使按鈕更加美觀和易于使用。