CSS3 按钮生成器

可视化生成 CSS3 按钮：尺寸、圆角、纯色或线性渐变背景、文字样式、边框、阴影与悬停效果（变暗 / 上浮 / 描边 / 发光），实时预览并输出 CSS 与 HTML 片段，内置 6 个预设。

浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。

实时预览

把鼠标移到按钮上就能试悬停效果

预设

点击预设直接套用，再按需微调

尺寸与圆角

宽度（0 = 自适应）160px

高度（0 = 自适应）48px

圆角8px

左右内边距24px

上下内边距12px

背景

背景类型

背景色

文字

按钮文案

文字颜色

字号16px

字重600

边框与阴影

边框粗细0px

边框颜色

阴影垂直偏移4px

阴影模糊12px

阴影颜色

阴影透明度15%

悬停与过渡

悬停效果

过渡时长300ms

CSS 代码

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 8px;
  background: #4D6BFE;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.15);
  transition: all 300ms ease;
}

.btn:hover {
  filter: brightness(0.9);
}

HTML 片段

<button class="btn" type="button">立即开始</button>

这个工具能做什么

调滑块试出满意的按钮后直接复制 CSS 与 HTML，不用手写 box-shadow、hover 规则和过渡动画。
统一设计系统里的按钮：6 个预设（品牌蓝、成功绿、危险红、双色渐变、霓虹胶囊、描边白底）套用后把颜色换成品牌色即可。
比较四种悬停效果（变暗、上浮、描边、发光）的实际观感，再决定用哪一种。
排查「按钮在页面里高度不一致」：输出的样式显式写了 width、height、padding 与 line-height: 1，可以逐项对照。

示例

输入

默认预设「品牌蓝」：160×48px、圆角 8px、背景 #4D6BFE、白色 16px/600 文字、无边框、阴影 0 4px 12px、悬停变暗、过渡 300ms

输出

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 8px;
  background: #4D6BFE;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.15);
  transition: all 300ms ease;
}

.btn:hover {
  filter: brightness(0.9);
}

阴影透明度 15% 会被写成 rgba(15, 23, 42, 0.15)；选择「悬停：无」时不会生成 :hover 规则。

常见问题

宽度填 0 是什么意思？

0 表示自适应：输出的 CSS 里写 width: auto，按钮宽度由文字和内边距决定。想让多个按钮宽度一致时再填具体像素值。

纯色背景和渐变背景能同时生效吗？

不能，两者是二选一。选「线性渐变」时输出 linear-gradient(角度deg, 起始色, 结束色)，纯色背景色会被忽略；悬停「描边」效果在渐变模式下取起始色作为描边色。

颜色可以写 rgba 或颜色名吗？

不行，颜色必须是十六进制：#RGB、#RGBA、#RRGGBB 或 #RRGGBBAA（# 可省略）。不透明颜色输出 6 位 hex，带透明度的颜色输出 rgba()，这样粘贴到 CSS 里不会有兼容问题。

悬停「上浮」和「发光」有什么区别？

上浮会加上 translateY(-2px) 并把阴影透明度提高 12 个百分点，看起来像抬起来；发光只换一条 0 0 24px 的主色阴影，按钮本身不动。

生成的代码会发到服务器吗？

不会。所有参数和 CSS 拼接都在浏览器里用 JavaScript 完成，页面不发任何网络请求，断网也能用。

关键词：cssbuttoncss3按钮按钮生成器gradienthover阴影前端样式ui

这个工具能做什么

示例

常见问题

同类工具