CSS按钮生成器
CSS 按钮生成器把可视化设置变成一条可直接粘贴的规则。一个按钮只需要 background-color、color、padding 和 border-radius；边框是可选的，padding 先写垂直值再写水平值。例如：padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff，得到一个圆角蓝色按钮，其文字对比度为 5.17:1，达到 WCAG AA 级。
预览
无障碍检查
自定义
快速模板
生成的代码
已复制
复制失败。请选择结果并手动复制。
热门工具
关于CSS按钮生成器
CSS 按钮生成器把若干滑块和取色器，变成一个按钮真正需要的那一条 CSS 规则。你可以设置文案、背景色与文字颜色、字号与字重、水平和垂直内边距、圆角半径、边框宽度与颜色，以及四档阴影深度之一；再选一个可选的第二种颜色，纯色填充就会变成 135 度的线性渐变。预览位于控件上方，是一个套用你的取值的真实 HTML 按钮，尺寸与它将来在你页面上的渲染尺寸一致——你在这里确认的，就是你最终发布的。
有两点让输出真正可用，而不只是好看。第一，代码面板有两个标签页：一个可复用的 .btn 类，附带 :hover、:active、:focus-visible 和 :disabled 规则，可直接放进样式表；以及同一个 button 元素，把全部声明内联写在 style 属性里，供会剥离外部 CSS 的页面构建器、CMS 区块和邮件模板使用。第二，无障碍面板按 WCAG 2.2 计算这组配色，给出对比度和 AAA、AA 或未通过的结论，并在字号与字重达到大字号条件时自动切换到大字号阈值。它还会给出渲染高度——垂直内边距的两倍，加边框的两倍，再加字号的 1.2 倍，也就是规则里写死的行高，好让屏幕上的按钮恰好等于面板所报的高度——并与成功准则 2.5.8、2.5.5 中 24 x 24 和 44 x 44 CSS 像素的目标尺寸对照。
渐变会对两个色标分别检测，显示其中较差的那个比值。八套预设——主要、危险、成功、描边、胶囊形、渐变、淡色和霓虹——是起点而不是终点：点一下，然后接着调。任何颜色、文案和滑块位置都不会被发送到别处；对比度计算、预览和代码都在页面内完成，所以比值会与重绘按钮的那一次按键同步更新。你复制走的是一个类，不需要安装框架，没有构建步骤，也没有运行时脚本。
使用场景
如何使用
在“按钮文本”中输入按钮上要显示的文案，然后用色板或旁边的十六进制输入框设置背景色和文字颜色。
拖动字号、水平内边距、垂直内边距和圆角滑块来调整按钮外形；调大边框宽度并搭配边框颜色，即可做出描边效果。
把字体粗细设为常规、中等、半粗体或粗体，把阴影设为无、小、中或大。
勾选“渐变”并选择第二种颜色，即可让背景变成对角双色渐变。
点击主要、描边、胶囊形、渐变、淡色或霓虹等快速模板卡片，载入一套现成样式后继续微调。
在“预览”面板确认按钮的实时效果，把输出选项卡切换到 CSS 或 HTML + CSS，然后点击代码框上的复制图标。
专业提示
- 先定字号，再动其他。文字定型之后，内边距和圆角才好判断，而高度读数（2 x 垂直内边距 + 2 x 边框宽度 + 1.2 x 字号）也会随之变化。
- 先套一个预设再微调。「描边」和「淡色」预设本身就带有大于零的边框宽度，是做次级按钮最快的起点。
- 直接在色块旁的输入框里键入十六进制色值，不必在取色器里翻找；预览和对比度会随每次按键更新。
- AA 级对比度在任何字号下都要满足，变的只是门槛：普通文字 4.5:1，字号达到 24px 或加粗 18.66px 后为 3:1。3:1 的配色在明亮显示器上也许还行，在户外就会看不清，所以请把这个较低的门槛当成上限，而不是目标。
- 渐变会对两个色标分别检测并显示较差的那个比值，所以若只有一端不达标，移动那个色标即可，不必把整个按钮重新配色。
故障排除
复制的 CSS 在我的页面上没有任何可见效果。
要么这个类被覆盖了，要么根本没有生效。确认元素上确实写着 class="btn"，把你的样式表放在框架 CSS 之后加载，并打开开发者工具的 Styles 面板：被划掉的声明说明另一个选择器凭优先级或顺序胜出。
渐变看起来是平的，或者根本不出现。
渐变是背景图像，不是背景颜色。勾选「渐变」，工具就会输出 background: linear-gradient(...) 而不是 background-color。若仍然看不到，请在同一元素上查找后面出现的 background 简写属性或 background-image：简写会把 background-image 重置为 none，从而抹掉渐变。后写的 background-color 无法遮住它，因为按照 CSS Backgrounds 3，背景颜色绘制在背景图像的下方。
对比度徽章说配色不达标，但按钮在我看来挺清楚的。
对比度按相对亮度计算，而不是按一种颜色看上去有多鲜艳。像 #f59e0b 配白字这样的中间调组合，看着明亮，实际只有 2:1 左右。请把背景调暗，或把文字改成接近黑色；比值会在你输入时同步更新。
常见问题解答
为这个类写一条规则，设置六个声明：background-color、color、font-size、font-weight、padding 和 border-radius。只有设计确实需要时才加 box-shadow 和边框。生成器替你写的正是这条规则：拖动滑块，看实时预览，然后把 CSS 标签页里的 .btn 代码块复制进你的样式表。
CSS 标签页给出一个可复用的 .btn 类及其状态规则，粘进样式表后，改动这一段就能让全站按钮同时改变。HTML + CSS 标签页给出单个 button 元素，把同样的声明内联写在 style 属性里——页面构建器、CMS 区块和邮件模板需要的正是这种形式，因为它们会剥离外部样式表。若点击是要跳转，把它改成带 href 的链接。
把「边框圆角」滑块往上拉。8px 左右就是大多数界面使用的柔化矩形，超过按钮高度的一半后，四角会连成胶囊形。在默认的 16px 字号和 12px 垂直内边距下按钮高 43px，所以圆角超过大约 22 就已经完全圆了，手写 CSS 里的 999px 也是同一个意思。
会。每次改动文字或背景颜色，它都会重新计算 WCAG 对比度并显示 AAA、AA 或未通过。普通文字 AA 需要 4.5:1，AAA 需要 7:1；24px 的文字，或 18.66px 的粗体文字算作大字号，只需 3:1 和 4.5:1。渐变填充会分别对两个色标计算。
尺寸面板给出的渲染高度等于垂直内边距的两倍，加上边框宽度的两倍，再加上字号的 1.2 倍——1.2 是生成器写死在规则里的行高，所以这个数字与上方绘制的按钮完全一致。WCAG 2.2 成功准则 2.5.8 要求 24 x 24 CSS 像素的目标，2.5.5 则提高到 44 x 44。默认的 16px 字号配 12px 垂直内边距得到 43px，明显高于最低要求。
当点击作用于当前页面时用 button：提交表单、打开对话框、执行 JavaScript。它默认可获得焦点，按 Enter 和空格都会触发，并支持 disabled 属性。当点击要跳转到另一个网址时用带 href 的链接，这样中键点击和「在新标签页中打开」才照常可用。两者可以使用同一个 .btn 类。
生成的 CSS 已经带有 .btn:hover 和 .btn:active。保持勾选「在代码中包含 focus 和 disabled 状态」，还会得到 .btn:focus-visible，其轮廓为 3px、偏移 2px，以及半透明并带 cursor: not-allowed 的 .btn:disabled。切勿在没有可见替代的情况下删掉焦点轮廓，否则使用键盘的人将完全失去位置线索。
可以。输出是纯 CSS，没有许可证、没有署名要求、没有运行时依赖，首行的署名注释也可以删除。你输入的内容同样不会上传：预览、生成的代码和对比度计算都由本页内的 JavaScript 完成，因此你的配色和文案永远不会到达服务器。
几乎总是继承样式在作怪。框架的重置样式、父元素的 font-family、全局的 button 规则或更高优先级的选择器，都可能覆盖你粘贴的类。请把自己的样式表放在框架 CSS 之后加载，让 .btn 只出现在一个元素上，并查看开发者工具的 Styles 面板：被划掉的声明会清楚告诉你是哪个选择器胜出。