CSS 按鈕結合了 HTML 的 或 元素與單一 CSS class，用以控制背景顏色、文字顏色、邊框、內距、字級、圓角和 box-shadow；最簡潔的製作方式是視覺化調整這些屬性、在桌面與行動裝置寬度下預覽實際元素，然後把一條可讀的 .button 規則複製到你的樣式表。最終結果是一個小巧、不依賴框架的元件，使用的是一般 CSS 屬性，能在任何現代 CSS 運作的地方使用，無需影像素材或 JavaScript 執行環境。
本文會逐一說明真正重要的屬性、實際影響按鈕手感的決策，以及產出可重複使用 class 的最快方式。如果你曾經在樣式表裡手動微調 border-radius 和 padding，卻在另一個螢幕上對結果猶豫不決，那麼視覺化產生器能同時把同一組數值套用到真實預覽和 CSS 輸出上，消除這種猜測，你所看到的就是實際送出的結果。
樣式化按鈕背後的核心 CSS 屬性
一個樣式化按鈕其實就是一組套用在單一元素上的標準 CSS 屬性。根據 MDN 的背景與邊框指南，這些屬性穩定、支援度廣，而且不需要任何框架。CSS 按鈕產生器聚焦於涵蓋絕大多數按鈕設計決策的子集：
- background-color — 按鈕表面的填色。
- color — 標籤的文字顏色。
- border 與 border-radius — 外框粗細、顏色與圓角形狀。
- padding — 按鈕內部的垂直與水平間距。
- font-size 與 font-weight — 標籤的可讀性與視覺強調程度。
- box-shadow — 以標準順序的水平位移、垂直位移與模糊半徑構成的深度線索。
- cursor — 滑鼠移過可點擊元素時的指標行為。
W3C 的 CSS Backgrounds and Borders Level 3 規格說明了這些屬性在各瀏覽器中如何被解讀，這也是為什麼一個只使用標準屬性的產生器，其輸出能在任何現代 CSS 運作的地方正常運作。
如何使用 CSS 按鈕產生器設計按鈕
CSS 按鈕產生器把這些屬性整合成一個精簡的視覺化工作區。每個控制項都直接對應到一條 CSS 宣告，預覽本身就是一個真實的 <button type="button">，其樣式與產生器輸出的數值完全相同。預覽按鈕使用 type="button"，因此不會意外提交外層表單。請依照以下步驟操作：
- 選擇顏色。挑選背景顏色、文字顏色與邊框顏色。工具接受六位數十六進位值並驗證其序列化形式，這能避免有疑慮的具名顏色，讓結果在貼到其他 CSS 時保持穩定。原生顏色輸入已提供可預期的瀏覽器驗證，產生器的邏輯也會再次檢查序列化後的值，因此格式錯誤的值絕不會進入輸出。
- 設定邊框、圓角、內距、字型與陰影。調整邊框寬度、圓角、垂直與水平內距、字級和字重。然後依標準順序設定 box-shadow 的水平位移、垂直位移與模糊半徑。負值位移會把陰影往左或往上移動；模糊半徑則必須維持非負。每個控制項都落在經過文件化的實用範圍內，因此意外的值不會產生無法使用的預覽或過於龐大的規則。
- 在桌面與行動寬度下檢視真實預覽。縮放預覽區或切換到行動版檢視。這能抓出在 1200 像素時看起來平衡、在 360 像素時卻顯得擁擠的內距，或是在小螢幕上顯得親和、放到寬螢幕上卻顯得笨重的圓角。預覽是真實的 HTML 元素而非經過樣式處理的圖片，因此所見即所得。
- 複製 CSS class、必要時重新命名，並加入互動狀態。點選複製按鈕，把規則貼到你的樣式表中。把 .button 重新命名以符合你的專案（例如 .btn-primary），或把它放在父選擇器之下，以避免與自帶 .button 的工具型框架衝突。接著再依產品語意補上 hover、active、disabled 與 :focus-visible 規則。
所有運算與預覽都保留在當前的瀏覽器分頁中。Lizely 不會接收或儲存你的設計值，因此這套工具可安心用於客戶進行中的工作、未定案的色彩系統，或尚未公開的品牌色票。
讀懂並調整產生的 CSS
複製出來的輸出是一條完整的 .button 規則，採用刻意安排的屬性順序：background-color、color、border、border-radius、padding、font-size、font-weight、box-shadow、cursor。維持這個順序讓規則易於瀏覽，日後也方便覆寫。典型的輸出看起來像這樣：
.button { background-color: #2563eb; color: #ffffff; border: 1px solid #1d4ed8; border-radius: 6px; padding: 10px 18px; font-size: 15px; font-weight: 600; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); cursor: pointer; }
有三點值得注意。第一，選擇器刻意保持通用，上線前請先重新命名或限定範圍，避免與其他函式庫的 .button 衝突。第二，陰影採用克制的半透明黑色，讓控制項保持易於理解，而不會把工具變成完整的陰影編輯器；如果你想要更豐富的陰影，請接著參考 box shadow 教學。第三，產生器使用的是一般 CSS 屬性，因此結果不需框架、元件庫、影像素材或 JavaScript 執行環境即可運作。
間距、字型與陰影的決策
間距通常是一顆按鈕最重要的部分。垂直內距控制高度與標籤周圍的呼吸感，水平內距則影響視覺寬度。字級和字重同時影響可讀性與感知上的強調程度：14 像素的 semibold 標籤搭配 8 像素的垂直內距看起來是低調的操作；16 像素的粗體標籤搭配 14 像素的垂直內距則讀起來像主要行動呼籲。
在淺色背景上加上邊框能提升輪廓清晰度，而圓角會把按鈕的調性從技術感轉為親和或膠囊狀。下表把常見的設計意圖對應到通常能達成效果的數值；任何特定品牌的精確數字，仍應來自工具在目標尺寸下的預覽。
| 按鈕意圖 | 常見圓角 | 常見垂直內距 | 常見陰影 |
|---|---|---|---|
| 技術性或資訊密集的 UI | 2–4 px | 6–8 px | 無陰影或 1 px 陰影 |
| 中性網頁按鈕 | 6–8 px | 10–12 px | 短位移、低模糊 |
| 親和的的行銷 CTA | 12–24 px | 14–18 px | 稍微大一點的模糊 |
| 膠囊型按鈕 | 高度的一半或更大 | 與其他樣式相同 | 建議不要陰影 |
這些範圍是起點而非定則。請在預覽中測試實際數字，因為 14 像素的內距值在字級 13 與字級 18 時讀起來差異極大，而在桌面看起來俐落的圓角，一旦遇到較長的標籤把按鈕拉寬時，可能又會顯得過於圓潤。
無障礙與互動狀態
產生器不會自動計算對比，在預覽中看起來可接受的配色，在不同螢幕或使用者開啟強制色彩時，仍可能不符合無障礙要求。請把最終的色票丟到專門的對比工具中驗證，確認預設、hover、active、disabled 與 focus 等狀態都能維持達標的比例。
輸出刻意不會自動生成 hover、focus-visible、active、loading 或 disabled 樣式，因為這些狀態取決於產品語意。複製完成後，請在自己的樣式表中補上。Hover 可以稍微改變背景。Active 可以縮小陰影或把元素平移一個像素。Disabled 應在不只依賴透明度的情況下表達「不可用」，因為單純改變透明度並不符合多項無障礙指引。除非以同樣清晰的指示（例如外環、更粗的邊框，或對比明確的外框顏色）取代，否則不應移除 focus-visible 的外框。
產品中常見的按鈕變化
比起讓單一按鈕在視覺上過度雕琢，主要、次要、破壞性與低調按鈕之間的一致性更為重要。一個小型設計系統通常會把產生器的輸出搭配三到四個重新命名的 class，共享內距、圓角與字型設定，只在顏色和陰影上做變化：
- 主要（Primary） — 飽和的背景、白色文字、短陰影。畫面上最主要的行動。
- 次要（Secondary） — 透明或淡色背景、品牌色文字、搭配的邊框。
- 破壞性（Destructive） — 紅色或低調的暗紅色背景、白色文字、無陰影或較緊的陰影以傳達警示。
- 低調（Quiet） — 與頁面相同的表面色、中性文字、無邊框、無陰影。
盡量從既有的設計 token 出發。如果你的設計系統已定義間距、圓角或色彩級距，把這些數值代入產生器，確認結果依然平衡，再把規則存回系統中，讓其他元件保持一致。產生器最適合用來建立基準，而非整套設計系統；請把輸出視為可重複使用元件的種子，而非一次性的成品。
請用短標籤、長標籤、翻譯後的文字、圖示、窄螢幕、縮放、鍵盤導覽與觸控來測試最終元件。一顆能同時撐過兩個字、三十個字、加上 emoji 前綴的標籤，以及 200% 瀏覽器縮放而不破版的按鈕，會比那種只搭配預設文字才看起來正確的按鈕更接近可上線的狀態。請把最小觸控尺寸放在心上，並在實際產品環境中驗證最終元件，再視其為完成。