CSS 按钮生成器

可视化设计按钮样式本地处理 · 数据不上传

风格

按钮文字

背景色

文字颜色

悬停背景色

边框颜色

圆角: 8px边框宽度: 0px左右内边距: 20px上下内边距: 10px字号: 15px

加粗阴影渐变背景

预览区的按钮可以悬停查看效果

CSS 代码

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: #2563eb;
  border: 0px solid transparent;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
.btn:hover {
  background: #1d4ed8;
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: 3px solid color-mix(in srgb, #2563eb 40%, transparent);
  outline-offset: 2px;
}

这个工具还可以用来:CSS按钮生成器按钮样式生成CSS颜色生成器

使用方法

1选择一种风格作为起点。
2调整颜色、圆角、内边距等参数。
3复制 CSS，在 HTML 中给按钮加上 class="btn"。

常见问题

生成的 CSS 怎么用？

把代码放进样式表，然后给按钮或链接加 class="btn" 即可。

包含无障碍的焦点样式吗？

包含 :focus-visible 样式，键盘操作时会显示清晰的焦点框。

CSS 阴影生成器可视化调 box-shadow CSS 渐变生成器线性 / 径向 / 锥形渐变，随机渐变 CSS 圆角生成器可视化调 border-radius 密码生成器生成随机高强度密码二维码生成器文本、WiFi、邮箱二维码随机数生成器指定范围的随机数

风格

使用方法

常见问题

相关工具