Softonic

CSS 按钮生成器

步 1 / 4 按钮文字

按钮文字

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

设计按钮时可分别查看默认、悬停、键盘焦点、按下、禁用和加载状态。你可以选择纯色或双色渐变，并设置边框、间距、圆角、阴影和各状态颜色。生成器会转义按钮文字，将设计留在浏览器中，并输出语义正确的 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，也不会通过服务器发送。

如何使用加载状态

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

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

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

常见问题

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

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

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

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

相关工具

Webpack 配置生成器

为纯 JavaScript、React 或 Vue 项目生成 webpack 5 的 webpack.config.js：支持 TypeScript、Babel、CSS 或 Sass、图片、HtmlWebpackPlugin、开发服务器，并给出 npm install 命令。

PHP 格式化工具

为简单的 PHP 代码片段添加换行和 2 或 4 个空格的缩进。请检查结果：本工具不是 PHP 解析器，也不会执行 PSR-12 规范。

OpenAPI 验证器

将 OpenAPI 或 Swagger 文档以 JSON 或 YAML 粘贴进来，检查其核心结构：版本字段、info 对象和 paths，并给出清晰的错误和警告。

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

CSS 加载动画生成器

用纯 CSS 创建圆形旋转图标：设置直径、边框粗细、强调色和旋转速度，实时预览后一键复制可直接使用的 CSS。无需 SVG 或 JavaScript。

Protocol Buffers 解码器

在浏览器中解码 hex、Base64、Base64URL、文本或文件中的 Protobuf 线格式字节，准确检查字段候选解释并导出私密报告。

此工具还提供其他语言版本