CSS 按钮生成器

使用方法

1. 「按钮文字」填按钮上要显示的字，例如「提交」「立即购买」「Save changes」。文字长度直接决定按钮宽度：中文按「1 个字符 = 1 个字号」估，拉丁字母与数字按约 0.48 倍字号估。
2. 「背景色」「文字色」用取色器选。「悬停背景色」是鼠标移上时替换的背景，一般比主色深一档，示例里主色 #2563EB 对应的悬停色是 #1D4ED8。
3. 「边框宽度」填 0 时，生成的 CSS 会把边框写成 transparent，此时「边框颜色」不参与输出；填大于 0 才会用取色器里的颜色。
4. 「圆角」「内边距·上下 / 左右」「字号」「字重」共同决定按钮的最终宽高，数值都以 px 计。
5. 「阴影」三项分别是 Y 偏移、模糊半径、透明度，默认输出 0 2px 4px rgba(0,0,0,0.15)；不想要阴影就把透明度填 0。
6. 按回车或点「生成按钮样式」，下方给出整段 CSS、实际尺寸、文字对比度与触控目标判定；点「复制 CSS」取走代码，点「复制对照表」取走对比度数据。

这个 CSS 按钮生成器能解决什么问题

写一个按钮，真正要调的其实是五组彼此牵制的数值：颜色决定对比度，内边距和字号决定高度，圆角决定形态，阴影决定层次，悬停与焦点决定交互反馈。任何一项单独拍脑袋都容易出问题——内边距留小了按钮只有三十几像素高，低于 44px 的触控目标线；文字色配浅了对比度不到 4.5:1，正文级别不达标；圆角填 9999px 却与 999px 在视觉上毫无区别（本工具早期版本名为「CSSButton生成器」）。本 CSS 按钮生成器把这几组数值收在一张表单里，实时生成可直接粘贴的按钮样式代码，并同步给出按钮实际宽高、文字与背景的 WCAG 对比度、以及是否满足最小触控目标，适合前端开发、后台系统改版、落地页调样式，以及在定稿前先核对按钮的无障碍指标。

计算原理与变量说明

按钮的最终尺寸不是 CSS 里写死的，而是由文字、内边距、边框三者相加得出：宽 = 文字宽 + 左右内边距 + 边框×2，高 = 字号 × 行高 + 上下内边距 + 边框×2。行高这里按 1.2 估，字号 16px 的行盒就是 19.2px，加上上下各 12px 的内边距，默认按钮高 43.2px——正好卡在 44px 最小触控目标的下面 0.8px，这就是示例里「差一点不达标」的来历。想把高度提到 47.2px，只需把上下内边距从 12px 改成 14px。

文字宽度的估算方式：中日韩全角字符按「1 个字符 = 1 个字号」计，拉丁字母与数字按约 0.48 倍字号计，空格同样计入。所以「提交」两个字在 16px 下约 32px，「Save changes」12 个字符约 92px，「立即购买」四个字约 64px。这解释了为什么同样内边距下按钮宽度会随文案大幅变化，也说明按钮宽度不该用手写 px 固定。

WCAG 2.1 相对亮度与对比度是这一页的核心机制。把每个颜色通道的值除以 255 记作 v，先做一次线性化：当 v ≤ 0.03928 时取 v ÷ 12.92，否则取 ((v + 0.055) ÷ 1.055) 的 2.4 次方；再按 0.2126、0.7152、0.0722 三个权重（分别对应人眼对红、绿、蓝的敏感度）加权求和，得到相对亮度 L。两个颜色的对比度 = (较亮的 L + 0.05) ÷ (较暗的 L + 0.05)。阈值是双档的：正文级别要求 4.5:1，大字号（约 18.66px 加粗或 24px 常规以上）只要求 3:1。示例里 #FFFFFF 配 #2563EB 得 5.17:1，正文级别通过；换成 #10B981 只有 2.54:1，怎样都不通过；换成 #EF4444 是 3.76:1，只有大字号能用。

为什么生成 :focus-visible 而不是 :focus：:focus 在鼠标点击时也会命中，会给鼠标用户留下一个不必要的描边；:focus-visible 只在浏览器判断「用户需要看到焦点」时命中，典型场景就是键盘 Tab 导航。把焦点描边写进 :focus-visible，键盘用户可以看清当前位置，鼠标用户又不会被多余轮廓打扰，示例用的是 outline: 2px solid #2563EB; outline-offset: 2px;。

过渡时长的感知阈值：transition 超过 200ms 会让人感觉「按下去没反应」，100 ～ 150ms 之间最贴合即时反馈，示例统一用 .15s。阴影也类似，透明度低于 0.1 时在浅色背景上几乎看不见，而模糊半径填 0 时浏览器仍会画出约 1px 的硬边影子，这也是「把模糊设成 0 阴影却没消失」的原因。

完整示例（数值仅作演示）

示例条件：文字「提交」，背景 #2563EB，文字色 #FFFFFF，边框 0，圆角 8px，内边距 12px 24px，字号 16px，字重 600，阴影 0 2px 4px rgba(0,0,0,0.15)，悬停背景 #1D4ED8。这些正好是本页打开时的默认值，按下面的输出即可复现。

.btn {
  background: #2563EB;
  color: #FFFFFF;
  border: 0px solid transparent;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: #1D4ED8; }
.btn:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

由上面这套参数得到的尺寸与指标：

• 文字「提交」约 32px 宽 → 按钮宽 80px（32 + 24 + 24 + 0）、高 43.2px（16 × 1.2 + 12 + 12）。
• 同一套内边距下，文字换成「Save changes」（约 92px）按钮宽变成 140px；换成「立即购买」（约 64px）宽变成 112px；三种文字的按钮高度都是 43.2px。
• 文字 #FFFFFF 与背景 #2563EB 的对比度为 5.17:1，正文级别 AA 通过（≥ 4.5:1）。
• 按钮高 43.2px，比 44px 的最小触控目标少 0.8px，属于「差一点不达标」；把上下内边距加到 14px，高度变成 47.2px 即达标。

示例中的颜色、圆角与尺寸均为演示数值，不代表任何具体产品的设计规范。

圆角、内边距与对比度对照表

圆角只改变观感、不改变尺寸，下面的圆角表给出常见取值的视觉印象；内边距表固定字号 16、行高 1.2、边框 0，用来看不同内边距对按钮高度与触控目标的影响。

页面上方的对比度对照表给出 12 组常见前景 / 背景配色的实测值，例如 #FFFFFF 配 #2563EB 是 5.17:1 通过，配 #10B981 只有 2.54:1 不通过，配 #000000 高达 21.00:1。点「加载更多」展开全部，点「导出 CSV」或「复制对照表」可带走数据。

结果边界、舍入与适用说明

• 圆角 ≥ 按钮高度一半时视觉上等同胶囊，CSS 会自动收敛，所以写 999px 与 9999px 效果一样；示例按钮高 43.2px，圆角到 21.6px 已是完全圆头。
• 文字宽度是估算值，实际字体、字距、是否加粗都会让真实宽度有出入，最终排版请以浏览器实测为准。
• 内边距过大时按钮可能宽于容器，需要给按钮补 max-width:100% 并允许文字换行。
• 阴影的模糊半径填 0 时仍会画出约 1px 的硬边影子，要完全去掉阴影请把 Y 偏移、模糊、透明度都置 0。
• 对比度按 sRGB 相对亮度计算，不涵盖半透明背景、渐变背景与图片背景；这三种情况需要按背景最亮与最暗处分别核对。
• 过渡时长建议 100 ～ 150ms，超过 200ms 会显得迟滞，本页生成的过渡固定为 .15s。
• 字重只提供 400 / 500 / 600 / 700 四档，因为再多档位在多数系统字体上无法真实渲染。

常见问题

相关工具

• CSS 圆角生成器：只调圆角与尺寸，专做圆角形态与胶囊按钮。
• CSS 阴影生成器：多层阴影与阴影参数的单独调试。
• CSS Flexbox 布局生成器：把按钮放进弹性布局里做对齐。
• CSS 网格生成器：按钮组与工具栏的网格排布。
• 配色生成器：由主色推导悬停色与禁用色。
• CSS 校验：检查生成的代码是否有语法错误。
• 生成器：查看全部生成器工具。