CSS 按钮生成器

CSS 按钮生成器: 用途

选择一个现成样式（实心、胶囊、描边、渐变或方形），调整文字、颜色、字号、间距、圆角、阴影、字重以及鼠标悬停效果（上移、变暗或放大）。预览真实可用：悬停并点击试试。

CSS 包含键盘可见的焦点、仅在有鼠标的设备上生效的悬停效果，以及点击时轻微缩小。工具会显示文字与背景的对比度，低于 4.5:1 时给出提示。

使用方法

1. 选择一个现成样式。
2. 调整颜色、大小、圆角、阴影和效果。
3. 检查对比度并复制 CSS 和 HTML。

使用场景

• 落地页上的行动号召按钮。
• 统一网站的按钮样式。
• 通过查看效果来学习 CSS。

常见问题

按钮具备无障碍性吗？

代码使用 button（或 a）标签，通过 :focus-visible 保留可见的焦点轮廓，当文字与背景的对比度低于 4.5:1（WCAG 对普通文字的最低要求）时，工具会发出提示。

为什么悬停效果只在电脑上出现？

悬停放在 @media (hover: hover) 中，因为在手机上触摸会触发一个会卡在按钮上的假悬停。点击效果（:active）在所有设备上都有效。

可以把代码用在链接上吗？

可以。把 <button> 换成 <a href="..."> 并保留类名；CSS 已包含 display:inline-flex 和 text-decoration:none，两种情况都适用。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具