按钮状态生成器
设置按钮文字、颜色、圆角和禁用样式，预览默认、悬停、按下、聚焦、禁用和加载状态。
使用步骤
如何使用
- 编辑按钮文字、颜色、圆角以及禁用文案和颜色。
- 查看本地预览中的六种状态。
- 复制或下载生成的 CSS。
六种明确状态
输出包括默认、悬停、按下、focus-visible、禁用和加载示例。加载状态使用 data-loading 属性和文字标签。
适合调整的起点
预览和 CSS 都是本地示例。正式使用前，请结合产品检查对比度、尺寸、键盘行为、禁用语义和文案。
不使用外部资源
生成器使用标准 CSS 和文字加载指示器，不请求字体、图片、库或外部样式表。
常见问题
你可能还想知道
CSS 包含键盘聚焦吗？
包含。输出有清晰的 :focus-visible 轮廓，并将聚焦状态与悬停状态分开。
加载状态如何表示？
示例使用 data-loading 属性、文字标签和小型 CSS 指示器。请在应用中替换为真实操作和文案。
这是完整的按钮组件吗？
不是。这是专注的 CSS 示例。请在自己的标记中使用真实 button、可访问名称、disabled 属性和业务逻辑。