按钮生成器
免费在线使用 按钮生成器 无需安装即可使用工具
关于按钮生成器
本工具根据文本、颜色、尺寸、边框、悬停效果以及可选的 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`。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。