什么是 CSS 按钮生成器？

CSS 按钮生成器是一个可视化工具，帮助您设计自定义 CSS 按钮，无需手动编写代码。使用直观的控件调整颜色、渐变、阴影、边框、内边距和悬停效果，并在实时预览中立即查看结果。

无论您需要简单的纯色按钮、发光的霓虹效果，还是带有悬停过渡的平滑渐变，此工具都会生成干净的、可用于生产环境的 CSS 代码，您可以直接复制粘贴到项目中。

为什么使用按钮生成器？

节省时间

跳过手动编写 CSS 属性的试错过程，立即获得结果。

可视化反馈

在复制代码之前，准确查看按钮的外观和行为。

悬停预览

通过在预览按钮上实时悬停，直接测试悬停效果。

一致的输出

获得结构良好的 CSS，具有适当的过渡和光标样式，可直接用于生产环境。

使用方法

选择起点

从水平栏中选择 12 个内置预设之一（纯色、描边、渐变、药丸形、3D 按压、霓虹、玻璃态、极简、阴影提升、下划线、圆角或加粗）。每个预设都会为您配置普通和悬停状态。

自定义普通状态

选中普通选项卡后，根据需要调整控件：

背景 — 在纯色或渐变模式之间选择。对于渐变，设置两种颜色和角度。
文本 — 选择文本颜色、字体大小，并切换加粗开关。
内边距 — 设置垂直（上/下）和水平（左/右）内边距。
边框 — 控制边框宽度、颜色和圆角半径。
阴影 — 调整盒阴影的偏移、模糊、颜色和不透明度。
过渡 — 设置悬停过渡时长和缓动函数。

自定义悬停状态

切换到悬停选项卡，为悬停效果调整相同的属性。将鼠标悬停在预览按钮上，查看过渡效果的实际效果。

预览和测试

实时预览会自动更新。使用背景切换器在浅色、深色或自定义背景上测试按钮。编辑按钮文本，查看实际标签的外观。

复制代码

点击复制 CSS仅获取 CSS 规则，或点击HTML + CSS获取包含按钮元素的完整代码片段。

功能特性

带真实悬停的实时预览

与静态生成器不同，预览按钮支持真实的 CSS 悬停交互。将鼠标移到按钮上，查看配置的过渡效果的悬停状态 — 无需将代码粘贴到其他地方进行测试。

普通和悬停状态控制

独立设计两个按钮状态。普通选项卡控制默认外观，而悬停选项卡让您定义用户悬停时的确切变化。

纯色和渐变背景

在单一纯色或双色线性渐变之间切换。对于渐变，控制起始颜色、结束颜色和 0 到 360 度的角度方向。

12 个内置预设

使用精选的按钮样式快速开始：纯色、描边、渐变、药丸形、3D 按压、霓虹、玻璃态、极简、阴影提升、下划线、圆角和加粗。每个预设都设置普通和悬停状态。

完整的样式控制

微调按钮外观的每个方面：

文本

颜色选择器
字体大小（10–32px）
加粗权重切换

内边距

垂直（0–40px）
水平（0–80px）
独立控制

边框

宽度（0–8px）
颜色选择器
圆角（0–50px）

阴影

X/Y 偏移控制
模糊半径
带不透明度的颜色

过渡

时长（0–1s）
五种缓动选项
平滑动画

背景切换器

浅色模式测试
深色模式测试
自定义颜色测试

两个复制选项：复制 CSS 提供 .button 和 .button:hover 规则。HTML + CSS 包含包装在样式标签中的按钮元素，可直接粘贴到任何 HTML 页面。

常见问题

复制代码前能看到悬停效果吗？

可以。只需将鼠标悬停在预览按钮上，即可看到配置的过渡效果的悬停状态。预览使用真实的 CSS 悬停，而不是模拟。

如何创建渐变按钮？

在"背景"部分，点击渐变切换。然后您可以选择两种颜色并设置渐变角度。预览和代码输出会立即更新。

能否分别自定义悬停和普通状态？

当然可以。使用控制面板顶部的普通和悬停选项卡。每个选项卡都有自己的背景、文本、边框和阴影控制。过渡设置在"普通"选项卡中配置一次。

过渡设置有什么作用？

过渡控制按钮从普通状态平滑变化到悬停状态的方式。时长设置时间（例如 0.2 秒），缓动设置加速曲线（ease、linear、ease-in、ease-out、ease-in-out）。

生成的代码包含供应商前缀吗？

生成的 CSS 使用在所有现代浏览器中广泛支持的标准属性。所使用的属性（background、border-radius、box-shadow、transition）不需要供应商前缀。

能否在任何项目中使用按钮代码？

可以。生成的 CSS 是纯代码，与框架无关。您可以在 HTML 页面、React、Vue、Angular、WordPress 或任何网络项目中使用它。只需将 .button 类应用到您的元素即可。