一個具有回應式設計的 CSS 按鈕,從 320 像素的手機到桌上型監視器,都能維持其點擊區域、標籤可讀性與視覺比例,而無需為每個斷點準備獨立的樣式表。對於單一按鈕元素來說,回應式特性幾乎完全來自內部比例:標籤周圍的垂直內距多少、圓角如何隨該內距縮放、字級與觸控尺寸的關係。媒體查詢的重要性其實比大多數教學文章所說的更低,因為以比例式間距設計的按鈕,在任何寬度下看起來都已合適;媒體查詢通常只在需要變更標籤長度、圖示大小,或手機上的滿版行為時才介入。最快找到這些比例的方法,是一個有範圍限制的視覺工作台,其中每個控制項都有明確記載的範圍,而預覽就是實際會在頁面中呈現的 HTML 元素。這正是 CSS Button Generator 所提供的:八個涵蓋按鈕可見行為的屬性、一個由產生 CSS 的同一組數值實際渲染的即時預覽,以及一個可直接複製、不依賴任何框架、影像素材或 JavaScript 執行階段的基礎類別。
回應式設計的本質是比例,而不只是寬度
按鈕的回應式特性,並不是在檢視埠中像流體網格那樣拉伸。它關乎三項在任何寬度下都成立的具體特性:點擊區域大小、標籤可讀性,以及視覺比例。高度低於約四十像素的點擊區域,在控螢幕上會變得難以點擊。低於約十四像素的標籤,在手臂伸長的距離下會難以閱讀,而且在瀏覽器縮放時還會進一步縮小。視覺比例指的是圓角、內距與陰影維持其相互關係——在 8 像素內距的按鈕上,設 24 像素的圓角,在度 40 像素時顯得厚重,但在 200 像素時則取得平衡。
常見的錯誤是將回應式視為「在手機上變小」。按鈕往往需要相反的處理:在觸控裝置上增加垂直內距、稍微放大字級,並且只有在周圍版面配置要求時才採用滿版行為。從桌上型預覽向下設計到 320 像素寬度,通常比從行動端向上設計更容易,因為桌上型預覽能暴露出小型預覽所掩蓋的比例問題。
決定按鈕樣式的八個屬性
這個產生器涵蓋了幾乎涵蓋按鈕所有可見變化的八個 CSS 屬性,它們共同構成一個小型且可預期的合約。如同工具控制項所記載的,這組屬性如下:
| 屬性 | 控制內容 | 實用範圍 |
|---|---|---|
| background-color | 表面色調 | 任何六位數十六進位值 |
| color | 標籤對比 | 任何六位數十六進位值 |
| border | 在淡色背景上的輪廓 | 低整數寬度;零為有效值 |
| border-radius | 從科技感到藥丸狀的色調 | 0 起到大約按鈕高度的一半 |
| padding | 高度、寬度與留白空間 | 垂直控制標籤周邊,水平控制視覺寬度 |
| font-size, font-weight | 可讀性與強調程度 | 有範圍限制的數值輸入;字重亦有範圍限制 |
| box-shadow | 表面的浮起感 | 水平與垂直偏移(允許負值),模糊值不可為負 |
| cursor | 指標的互動提示 | 互動按鈕上的指標游標 |
間距是單一最重要的決定。垂直內距控制按鈕的高度與標籤周圍的留白;水平內距控制其視覺寬度。字級與字重同時影響可讀性與視覺上的強調程度。邊框能在淡色背景上強化輪廓;圓角則將色調從科技感轉向友善或藥丸狀——四個圓角的順序,以及「50%」實際代表的意義,在 Border Radius CSS: Pixels vs Percentages and Corner Order 中有解說。陰影採用 MDN 背景與邊框指南 所描述的標準水平偏移、垂直偏移與模糊順序;產生器僅暴露一個克制的半透明黑色,以維持控制項的易理解性,而不是將其變成完整的陰影編輯器。
使用產生器建立回應式按
這個工作台將這八項決策轉化為一組範圍有限的輸入。調整它們的順序,不如測試它們的順序重要:先設定粗略值、預覽,再進行微調。
- 選擇背景、文字與邊框顏色。全程使用六位數十六進位值。原生顏色輸入提供可預期的瀏器驗證,而產生器會再次檢查序列化後的值,確保挑選與貼上的值行為一致。
- 調整邊框寬度、圓角、垂直內距、水平內距、字級、字重,以及陰影的水平偏移、垂直偏移與模糊值。每個控制項都有記載的實用範圍;在 CSS 允許的情況下,有限的零值仍為有效。負值的陰影偏移會將陰影向左或向上移動;模糊值則維持非負。
- 在桌上型與行動裝置度下檢查實際預覽。預覽是一個真實的 HTML 按鈕,使用與產生 CSS 輸出相同的值來設定樣式,因此所見即所複製的內容。按鈕使用 type="button",以免在測試期間意外提交周圍的表單。
- 複製 CSS 類別並重新命名以符合專案。複製出的選擇器刻意採用通用命名——請重新命名或限定其範圍以避免衝突——然後在樣式表中自行新增互動狀態。
產生器不會輸出的內容,以及原因
一個完整的按鈕需要的不只是基礎類別,而產生器在正確的位置停下,而不是自行猜測。它刻意不會自動產生 hover、focus-visible、active、loading 或 disabled 樣式,因為這些都取決於產品本身。破壞性按不應像主要行動呼籲按鈕那樣在 hover 時變亮,而停用的按鈕則需要在不完全依賴透明度的情況下,傳達無法使用的狀態。
輸出內容包含 background-color、color、border、border-radius、padding、font-size、font-weight、box-shadow 與 cursor。複製完成後,請依據符合設計語言的模式自行補上其餘部分:
- hover:輕微的背景變化或細微的陰影提升。
- active:縮減陰影或小幅平移,營造被按下的感覺。
- focus-visible:可見的外框或光環。除非替換為對鍵盤使用者同樣清晰的指示,否則請勿移除預設的焦點指示器。
- disabled:較低的透明度,搭配不同的游標,以及清楚顯示控制項為非作用中的視覺信號。
產生器也不會自動計算對比。你仍然需要自行確認預設、hover、active、disabled 與 focus 狀態下的文字對比,並保留可見的焦點指示器。在預覽中看起來可接受的顏色組合,在不同顯示器上或使用者套用強制色彩時,仍可能未通過無障礙要求。請使用專用的對比檢查工具來檢驗結果,而不是將螢幕上的預視為最終定論。
跨裝置、標籤與輸入進行測試
在某個標籤長度與某個寬度下看起來合適的按鈕,還不算是回應式按鈕。在將工作台輸出視為可用於正式環境之前,請透過四項快速檢查來驗證這些值。
- 標籤長度:嘗試短、中、長的標籤。在每個長度下,內距都應感覺平衡,且最長的標不應造成不必要的換行。
- 翻譯文字:許多歐洲語言的長度會超過英文,而若干東亞語言則較短。請以實際字串而非佔位文字重新檢查圓角與內距。
- 圖示:內嵌的 SVG 或圖示字型會影響水平內距。在加入圖示時,請稍微減少水平內距,或在圖示容器旁使用獨立的間距值。
- 縮放與窄檢視埠:200% 的瀏覽器縮放與窄視窗是兩個實用的極端情境。在這兩種情況下,按鈕都應保持可點擊與可閱讀,並且當其在手機上變為滿版時,不應破壞周圍的版面配置。
所有這些計算與預覽工作都在當前的瀏覽器分頁中進行。產生器不會接收或儲存你的設計值,因此反覆進行這些測試完全不耗成本,也不會在伺服器上留下任何紀錄。
產生器是基準起點,而非設計系統
這八個屬性足以應付單一按鈕。但對於一般介面實際所需的主要、次要、破壞性與低調等四種按鈕,單靠這八個屬性並不足夠。這四者之間的一致性,比任何單一按鈕的視覺精緻度更為重要,而這種一致性來自你的設計權杖——具名的顏色、間距尺度與字重,這些應作為產生器各項數值的來源依據,而非每個按鈕各自從零發明。
盡可能從權杖出發,將最低觸控尺寸作為指引而非絕對標準,並在實際產品情境中驗證最終元件。將產生器的輸出視為可調整、納入版本控制並在整個介面中重複使用的工作基準。
若你正在權衡選項,CSS Speech Bubble Generator API Alternative: Run Locally 對此有詳細說明。