按钮生成器
调整颜色、圆角、渐变、边框与文字，实时预览并生成按钮 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
- 本地运行：所有样式计算与代码生成都在浏览器完成，无网络请求