跳至主要內容
Lizely

CSS 按鈕生成器

設計一個可重複使用的 CSS 按鈕，搭配協調的顏色、間距、邊框、字型、圓角與陰影。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇背景、文字與邊框顏色。
  2. 2.調整邊框、圓角、間距、字型與陰影值。
  3. 3.在桌面與行動裝置寬度下檢視真實按鈕預覽。
  4. 4.複製 CSS 類別，如有需要更名，並加入互動狀態。

關於CSS 按鈕生成器

CSS 按鈕生成器將最常見的按鈕樣式決策轉化為一個緊湊的視覺工作臺。選擇背景、文字與邊框顏色；設定邊框寬度與圓角；調整水平與垂直間距；選擇字型大小與粗細；並控制簡單的陰影。預覽為一個真實的 HTML 按鈕，使用與生成 CSS 輸出相同的值設定。當風格平衡適中時，複製完整的.button規則，並將類別名稱調整為符合你的專案需求。此生成器僅使用常見的 CSS 屬性，因此結果無需框架、元件庫、圖片資源或 JavaScript 執行環境即可運作。

間距通常是按鈕中最關鍵的部分。垂直間距控制高度與標籤周圍的呼吸空間，水平間距則控制視覺寬度。字型大小與粗細影響可讀性與視覺強調。邊框可在淺色背景上提升清晰度，圓角則改變風格從技術感轉為親和或像藥丸般圓潤。陰影設定使用標準的水平偏移、垂直偏移與模糊順序。負偏移會將陰影移至左側或上側；模糊值必須為非負數。產生的陰影採用剋制的半透明黑色，以確保控制項仍易於理解，而非變成完整的陰影編輯器。

顏色以六位十六進位值輸入。原生顏色輸入提供可預測的瀏覽器驗證，且邏輯會再次驗證序列化值。這避免了模糊的命名顏色，並確保複製結果穩定。生成器不會自動計算對比度。你仍需確認在預設、懸停、活動、禁用及焦點狀態下的文字對比度。即使預覽中看起來合適的顏色組合，仍可能在不同顯示裝置或使用者強制使用特定顏色時違反可及性要求。建議使用對比度檢查工具，並保留明顯的焦點指示器。

輸出包含背景顏色、文字顏色、邊框、邊框半徑、間距、字型大小、字型粗細、盒陰影與遊標。刻意不自動生成懸停、焦點可見、活動、載入或禁用狀態樣式，因為這些狀態取決於產品語義。你可以在複製後於樣式表中加入這些狀態。例如，懸停可能輕微改變背景，活動可能減少陰影或移動元素，禁用狀態應透過無歧義的設計傳達不可用性，且不應僅依賴不透明度。若要移除焦點可見的邊框，必須由同等清晰的指示取代。

邊界限制防止意外值導致無法使用的預覽或過大輸出。邊框寬度、半徑、間距、字型大小、粗細與陰影設定皆有明確的實際範圍。零值在理論上仍為有效，只要 CSS 允許。預覽按鈕的 type=button，因此不會意外提交周圍表單。複製的選擇器為刻意通用，建議更名或限制範圍以避免衝突。請用短標籤與長標籤、翻譯文字、圖示、窄螢幕、縮放、鍵盤導航與觸控進行測試。

所有計算與預覽皆在瀏覽器中完成。Lizely 不會接收或儲存設計值。此工具最佳用途為建立基準，而非完整設計系統。盡可能從現有設計語彙出發，留意最小操作尺寸，並在實際情境中驗證最終元件。主要、次要、破壞性與靜默按鈕之間的統一性比單一按鈕視覺華麗更重要。

方法與來源

驗證十六進位色彩值與範圍有限的數值控制元件，標準化邊框、內邊距、字型、圓角與盒陰影屬性的順序，並將相同樣式物件套用於實際按鈕預覽。

常見問題

產生的 CSS 是否包含懸停與焦點狀態？
沒有。它會建立基礎類別，因為互動狀態取決於你的產品語意。複製後請自行新增懸停、活動、停用與焦點可見的樣式規則。
工具是否驗證色彩對比？
沒有。請針對每種狀態使用專用對比工具檢測，並測試強制色彩與可見的鍵盤焦點。
有上傳內容嗎？
沒有。預覽與 CSS 產生皆在當前瀏覽器標籤頁中執行，不會上傳任何內容。

相關工具

開發者工具 使用指南

查看全部