按钮样式生成器

怎么用

1. 输入按钮文字，设置水平内边距、垂直内边距、圆角与字号（单位像素）。
2. 用取色器挑选背景色与文字颜色，再设置边框宽度与边框颜色。
3. 选择阴影档位（小/中/大/无）与过渡时长（毫秒）。
4. 挑选悬停背景色与悬停文字颜色，把鼠标移到预览按钮上确认交互效果。
5. 点击生成 CSS，从报告里复制样式表与 HTML 片段。

常见用途

• 设计评审 —— 不动构建，直接为落地页行动按钮试一版新样式。
• 交付备注 —— 把现成 CSS 贴进工单，工程师一眼就知道你要的效果。
• 深色模式核对 —— 并排替换背景与文字颜色，直到对比度看着舒服。
• CSS 教学 —— 在内边距、圆角与投影同时生效的真实元素上讲演示课。

常见问题

问：生成的 CSS 兼容哪些浏览器？ 答：输出用的都是长期标准的属性：padding、border-radius、box-shadow、transition 和 :hover 选择器，当前桌面与移动浏览器都支持。

问：怎么做出胶囊按钮？ 答：把圆角设成大于按钮高度一半的值，比如 999 px，两端就会完全变圆。

问：过渡时长控制什么？ 答：控制悬停变化持续的毫秒数。150 到 250 ms 手感跟得上，超过 400 ms 在点击时会显得拖沓。

问：预览是图片吗？ 答：不是。预览是套用了生成 CSS 的真实按钮元素，悬停与文字换行的表现和上线后一致。