CSS 按钮生成器

设置、检查并复制

1. 输入纯文本和一个允许的类名，选择字体、字号、字重、内边距和边框。
2. 编辑各状态的颜色和阴影。焦点只改变轮廓。选择导出的按钮是否禁用。
3. 在实时模式下使用 Tab 检查真实焦点。查看有限的对比度提示，分别复制 HTML 和 CSS。

原生语义与交互状态

HTML 使用带 type="button"、类名和纯文本的原生按钮。它不包含应用操作，请在自己的应用中添加。

悬停和按下可能同时发生。按下规则位于悬停规则之后，会重新设置所有表面属性，包括无阴影。焦点添加独立轮廓。

disabled 属性会真正禁用按钮；灰色外观本身并不代表禁用。其他编辑控件仍可使用。

一个受限的类名使 HTML 和选择器保持一致。空格、点、逗号和伪类会被拒绝。

文字与对比度示例

保存<草稿>并“发送”🚀 会保留为纯文本。HTML 对特殊符号进行转义，不会创建额外元素。

示例在悬停时使用较深的蓝色和阴影，按下时恢复蓝色并移除阴影。

黑白对比度为 21:1，相同颜色为 1:1。阈值取决于字号和字重，比较使用未舍入的值。

样式和无障碍限制

工具提供不透明纯色、共用阴影形状和系统字体，不生成渐变、动画或应用操作。

模拟状态不能测试键盘焦点。请使用实时模式；预览中裁切的阴影不会改变复制的 CSS。

对比度和最小 44 像素尺寸不能证明无障碍性。还需检查上下文、键盘和辅助技术。

目标页面的样式、宽度和字体会影响结果。预览背景不会导出；禁用文字有例外规定。

本地编辑

工具不会上传输入，也不会创建历史记录、包含输入的链接或远程字体请求。复制由用户主动执行。网站服务和扩展独立运行。