网页按钮生成器

可视化设计按钮样式，导出含 hover 效果的 CSS

调节文字、字号字重、内边距、圆角、纯色或渐变填充、边框与阴影，配置提亮、上浮、阴影加深等 hover 效果，实时预览正常态与 hover 态并导出完整 CSS 代码，全部在浏览器本地计算。

预设风格

按钮参数

文字内容

字号16px

字重600

水平内边距24px

垂直内边距12px

圆角8px

过渡时长0.3s

填充类型

颜色

边框宽度0px

边框颜色

文字颜色

阴影

启用阴影

X 偏移0px

Y 偏移4px

模糊14px

扩展0px

颜色

不透明度0.35

Hover 效果

上浮（translateY(-2px)）提亮（brightness(1.1)）阴影加深

实时预览

左侧为正常态，右侧为模拟 hover 态；下方为不同尺寸展示

生成代码

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: #6366f1;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 4px 14px 0px rgba(99, 102, 241, 0.35);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0px 7px 21px 0px rgba(99, 102, 241, 0.47);
}

#关于网页按钮生成器

按钮是网页中最重要的交互元素之一，它的视觉层级直接影响转化率。本生成器覆盖按钮设计的全部高频属性：文字排版、内边距、圆角、纯色 / 渐变 / 透明填充、边框、多层阴影以及 hover 反馈（提亮、上浮、阴影加深），并输出包含 .btn 与 .btn:hover 规则的完整 CSS。

典型应用场景

落地页 CTA 主按钮、注册 / 购买按钮的快速定稿
为设计系统补齐次要按钮、幽灵按钮、危险按钮等变体
给开源项目或静态页面快速生成风格统一的按钮样式
学习 box-shadow、linear-gradient 与 transition 的组合用法

常见问题

hover 效果如何模拟？预览区右侧按钮直接以内联样式呈现 hover 后的状态，方便不看代码也能确认效果。
透明填充是做什么的？透明填充加边框就是「幽灵按钮」，常用于次要操作或深色背景上的轻量按钮。
阴影颜色为什么有透明度？阴影通常使用带透明度的颜色才自然，可用不透明度滑块调节，生成 rgba 值。

网页按钮生成器

预设风格

按钮参数

阴影

Hover 效果

实时预览

生成代码

#关于网页按钮生成器

典型应用场景

常见问题

相关工具推荐

CSS阴影生成器

Logo制作器

CSS渐变生成器

CSS动画生成器

CSS边框生成器

图案生成器