CSS 按钮生成器

什么是在线 CSS 按钮生成器？

CSS 按钮生成器是一款功能全面的免费在线工具，帮助你快速生成漂亮的 CSS 按钮样式。无需编写代码，通过可视化参数面板调整即可实时预览，一键生成可直接使用的 CSS/HTML/SCSS 代码。

核心功能

• 文字/字体控制 — 自定义按钮文字、字体、字号、颜色、字重、斜体、字间距和行高
• 背景设置 — 背景颜色 + 透明度控制，支持线性/径向/锥形渐变
• 尺寸/圆角 — 独立控制宽度、高度、四边内边距，支持统一圆角或四角独立圆角
• 阴影效果 — 文字阴影（X/Y/模糊/颜色）+ 盒阴影（X/Y/模糊/扩散/颜色/内阴影）
• 边框控制 — 统一或四边独立边框（宽度/样式/颜色），支持 border-image 渐变边框
• Hover/Active 状态 — 悬停背景色、缩放、Y轴偏移、渐变/阴影覆盖；按下偏移 + 自动颜色变暗
• 动画预设 — 8种 CSS 动画：霓虹发光、滑动揭示、进度填充、边框蛇行、脉冲呼吸、波纹扩散、3D旋转、填充上升
• 过渡动画 — 可调持续时间和缓动函数

预设方案

内置 36 种一键切换的色彩方案，覆盖扁平、渐变、3D、线条、霓虹、玻璃、复古、材料等风格，全部支持参数调整。快速应用不同风格。

代码输出

• CSS — 完整按钮样式代码 (.btn-custom + :hover + :active)，可选 vendor 前缀
• HTML — <button> 和 <a> 两种标签示例代码
• SCSS — SCSS mixin 版本按钮代码，方便在项目中复用

内联图标支持

内置 10 种 Lucide 内联 SVG 图标（下载、右箭头、搜索、心形、星形、设置、用户、邮件、发送、上传），可选择图标位置（左/右）和大小。