Softonic

CSS 按钮生成器

步 1 / 4 按钮文字

按钮文字

请输入纯文本标签。类似 HTML 的文字会在生成的代码中转义。

标签和设计都留在此浏览器中。多页流程使用会话存储，不会把内容写入 URL。

设计按钮时可分别查看默认、悬停、键盘焦点、按下、禁用和加载状态。你可以选择纯色或双色渐变，并设置边框、间距、圆角、阴影和各状态颜色。生成器会转义按钮文字，将设计留在浏览器中，并输出语义正确的 HTML 和经过范围限制的 CSS。

如何生成 CSS 按钮

  1. 1

    填写按钮文字

    输入按钮上显示的纯文本。类似 HTML 的字符会作为文字保留，不会执行。

  2. 2

    设置基础样式

    选择纯色或渐变背景、文字与边框颜色、尺寸、内边距、圆角和阴影。

  3. 3

    设置交互状态

    指定悬停、按下和焦点状态的颜色与位移。禁用和加载规则会自动加入。

  4. 4

    查看辅助提示

    检查最低文字对比度、焦点指示器对比度以及强制采用的最小点击区域。

  5. 5

    复制或下载

    复制经过转义的 HTML 和 CSS，或下载独立的 UTF-8 HTML 预览文件。

生成的代码包含什么

HTML 使用真正的 <button type="button"> 元素，并将可见文字放在 span 中。CSS 涵盖六种常用状态：

  • 默认：没有交互时的普通外观
  • 悬停：指针设备停留在按钮上时
  • 键盘焦点：通过 :focus-visible 显示
  • 按下：控件正在被按下时
  • 禁用：通过原生 disabled 属性显示
  • 加载：通过 aria-busy="true" 显示

实际应用仍需决定按钮何时进入禁用或忙碌状态。生成器只提供显示规则，不会虚构应用状态或绑定点击操作。

对比度提示不是合规证明

编辑器会计算基础色、渐变终点色、悬停色和按下色中的最低文字对比度，并以 4.5:1 作为普通大小文字的目标。它还会比较焦点轮廓与浅色预览背景，以 3:1 作为非文字元素的目标。

这些数字有助于发现常见问题，但最终页面可能把按钮放在不同背景上。请在实际布局中重新检查焦点轮廓和边框对比度。禁用控件会降低不透明度；如果用途并不明显，应在附近说明禁用原因。

点击区域与动态效果

导出的规则会把行内方向和块方向的最小尺寸设为 44 px。这个尺寸适合许多触控界面，也大于 WCAG 2.2 成功标准 2.5.8 的 24 CSS px 最低要求。最终产品仍需考虑布局、间距、例外情况和平台规范。

当用户要求减少动态效果时，悬停和按下位移会被移除。加载指示器不会消失，而是降低旋转速度，以便忙碌状态仍然可见。

安全的输出边界

可见文字会被规范化，限制在 120 个字素簇以内，移除不可见的文字方向控制符，并在代码片段和下载文件中进行 HTML 转义。颜色必须是六位十六进制值。所有数值设置都会取整，并限制在控件旁标明的范围内。

完整编辑器在浏览器内存中工作。可选的四页流程会把带版本号的设计保存在当前标签页的 sessionStorage 中。按钮文字和设计值不会写入流程 URL，也不会通过 Livewire 发送。

如何使用加载状态

在应用代码中添加和移除忙碌属性：

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">正在保存</span>
</button>

aria-busy 表示更新正在进行。如果必须防止重复触发，还应加入 disabled。操作完成后移除这两个属性，并把重要的成功或错误消息放在合适的状态区域中。

常见问题

不能。它提供对比度计算、清晰的焦点规则、减少动态效果处理、语义 HTML 和 44 px 最小点击区域，但是否合规仍取决于最终页面、周围颜色、内容、行为和实际测试。

不会。编辑器将文字和设计保存在浏览器内存中。可选的多页流程使用同一标签页的会话存储，不会把输入内容写入 URL 或 Livewire 请求。

提交、打开或切换等操作应使用按钮。页面导航应使用带有真实 href 的链接；如果链接需要相同外观，可以调整生成的类。

编辑器会显示失败消息，并在可读的文本区域中选中完整输出，供你手动复制。只有 Clipboard API 完成后才会显示成功。

相关工具

BBCode 转 HTML 转换器

将 BBCode（论坛标记）转换为干净的 HTML。支持格式标签、列表、引用、代码、图片、链接和表格。

二进制转 ASCII 转换器

粘贴二进制（用空格分隔的字节或一长串比特），即可得到它所表示的 ASCII 文本。支持 7 位和 8 位编码。

二进制转十六进制转换器

将二进制输入转换为纯大写十六进制值。非 0 和 1 字符会被忽略，前导零不会保留。

二进制转八进制转换器

通过每三位分组将二进制转为八进制。适合 Unix 权限、旧系统和紧凑的数字显示。

二进制转十进制

即时将二进制数转换为十进制。显示按位展开，让你看清每一位的贡献。

Base64 转 Hex 转换器

将 Base64 字符串转换为其底层字节的十六进制表示。适合检查令牌、密钥、证书和 JWT。