按鈕產生器
調整顏色、圓角、漸層、邊框與文字，即時預覽並產生按鈕 CSS 代碼。
使用說明
📖 工具介紹
按鈕產生器是一款讓前端與產品設計師不必手寫 CSS 就能做出精緻按鈕的線上視覺化工具。一個好看的按鈕背後往往要糾結一堆屬性：背景純色還是雙色漸層、文字用什麼色、圓角多大、內邊距多少、加不加邊框、字重粗不粗——本工具把這些全部做成了取色器與滑桿，並在上方舞台用一個真實按鈕即時渲染，您每動一下參數，按鈕立刻變身，所見即所得。背景支援純色與 135° 雙色漸層兩種模式，勾選開關即可切換；文字顏色與邊框顏色獨立取色；圓角從直角到膠囊按鈕（24px 以上）自由調整；內邊距與字型大小也用滑桿精確控制；按鈕文字直接輸入，支援中英文混排。調好樣式後，底部代碼框自動整理成一段規範的 .btn CSS，包含 display、padding、border、border-radius、font-size、font-weight、color、background 與 cursor，一鍵複製或下載為 .css 檔案即可在專案中使用。全程在瀏覽器本機完成，完全離線。
✨ 功能特點
- 即時預覽：舞台中央按鈕隨參數即時變化，所見即所得
- 雙色漸層：勾選後用 135° 線性漸層背景，可切回純色
- 圓角自由：0–40px 滑桿，直角到膠囊按鈕無縫過渡
- 邊框與字重：邊框寬度與顏色可調，文字加粗一鍵切換
- 標準代碼：自動輸出完整 .btn CSS，複製即用
- 範例與下載：內建暖色漸層範例，代碼可存為檔案
📝 使用方式
- 在「按鈕文字」框輸入要顯示的文字
- 用取色器設定背景色一（與背景色二，漸層模式下生效）
- 拖動圓角、內邊距、字型大小、邊框寬滑桿微調
- 依需要設定文字顏色、邊框顏色與是否加粗
- 滿意後點「複製代碼」貼上，或「下載 CSS」儲存
⚠️ 注意事項
- 對比可讀：文字顏色與背景之間請保持足夠對比，按鈕才清晰
- 漸層開關：取消勾選漸層時，背景僅使用背景色一
- 邊框為零：邊框寬設為 0 時，代碼中邊框寫為 transparent 佔位
- 參數範圍：圓角 0–40、內邊距 4–40、字型大小 12–28、邊框寬 0–8
- 本機執行：所有樣式計算與代碼產生皆在瀏覽器完成，無網路請求