按钮生成器
免费在线使用 按钮生成器 无需安装即可使用工具
關於按鈕產生器
本工具根據文字、顏色、尺寸、邊框、滑鼠懸停效果以及選用的 box-shadow 來建構 CSS 按鈕，並提供可即時懸停預覽的互動效果。它輸出一個 `.button { ... }` 類別，包含 `transition: all 0.2s ease`，並根據所選懸停效果（加深、變亮、抬起或無）產生單獨的 `.button:hover` 規則。
使用方法
1. 輸入按鈕文字（預設為 Click Me）。 2. 透過顏色選擇器或十六進位輸入框選擇背景色和文字顏色。 3. 使用滑桿調整字級（10-32px）、X 內邊距（8-48px）、Y 內邊距（4-24px）和圓角半徑（0-50px）。 4. 設定邊框顏色和邊框寬度（0-5px）。 5. 選擇懸停效果：加深、變亮、抬起或無。 6. 可選啟用陰影，並調整模糊、X 偏移和 Y 偏移。 7. 在預覽上懸停查看效果；點擊 CSS 輸出卡片上的複製按鈕。
懸停效果與輸出結構
加深/變亮透過 `adjustBrightness` 將背景顏色的 RGB 值 +/-30。抬起會在懸停時套用 `transform: translateY(-2px)` 以及 `box-shadow: 0 4px 8px rgba(0,0,0,0.2)`。選擇無時將完全省略懸停規則。輸出是一個 `.button` 單一規則，包含 background-color、color、font-size、padding、border-radius、border、cursor、transition 以及選用的 box-shadow，並在適用時緊接 `.button:hover` 區塊。不會產生 HTML。
▶為什麼我的懸停顏色是單調的變亮/加深，而不是真正的色相？
加深和變亮只是對背景十六進位顏色的每個 RGB 通道加或減 30。它們不會轉換為 HSL，因此非常亮或非常暗的基色可能會在 0 或 255 處被截斷。
▶輸出包含 HTML 標記嗎？
不包含。僅產生 `.button { ... }` CSS（選擇效果時還會有 `.button:hover`）。你需要自行套用該類別，例如 `<button class="button">...</button>`。
▶滑桿的可調範圍是多少？
字級 10-32px、X 內邊距 8-48px、Y 內邊距 4-24px、圓角半徑 0-50px、邊框寬度 0-5px、陰影模糊 0-20px、陰影 X/Y 偏移 -10 到 10px。
▶我可以停用懸停效果嗎？
可以。選擇懸停效果 = 無。產生的 CSS 中將完全省略 `.button:hover` 規則，但基礎規則上仍保留 `transition: all 0.2s ease`。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。