CSS的按鈕樣式設計非常重要,其中包括按鈕的大小。一個按鈕的大小直接影響它的可讀性,因此它必須被認真考慮。
/* 按鈕樣式的基礎設置 */ .button { padding: 10px 20px; /* 上下左右都是10像素 */ font-size: 16px; /* 字體大小是16像素 */ border-radius: 4px; /* 邊框圓角的弧度是4像素 */ } /* 大型按鈕 */ .button--large { padding: 20px 40px; /* 上下左右都是20像素 */ font-size: 20px; /* 字體大小是20像素 */ border-radius: 6px; /* 邊框圓角的弧度是6像素 */ } /* 小型按鈕 */ .button--small { padding: 5px 10px; /* 上下左右都是5像素 */ font-size: 12px; /* 字體大小是12像素 */ border-radius: 2px; /* 邊框圓角的弧度是2像素 */ }
在上面的代碼中,`.button` 是所有按鈕的基礎樣式,`.button--large` 和 `.button--small` 是根據需要定制的特殊樣式。通過這種方式,您可以輕松地為每個按鈕設置適當的大小。