CSS 按钮生成器

自定义按钮（颜色、圆角、阴影、文字），实时预览效果，然后复制可直接粘贴到项目中的完整 CSS 代码。在您的浏览器中 100% 本地生成。

按钮文字

背景颜色

文字颜色

圆角半径：8px

文字大小：16px

垂直内边距：12px

水平内边距：24px

投影粗体文字

CSS 代码

.btn {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #2269dd;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

工作原理

设计良好的按钮应当一眼就能看出可以点击，文字与背景之间要有足够的对比度，并带有能确认其可交互性的悬停效果。调整每个参数（颜色、圆角半径、阴影、尺寸），在预览中实时查看效果，然后复制完整的 CSS 代码，其中会自动包含一个带有加深色调和轻微上浮效果的 :hover 状态。

悬停颜色是如何计算的？

悬停颜色是通过加深您所选的背景色自动生成的，这样鼠标经过时就有明显的对比，而无需手动再选第二种颜色。

生成的 CSS 与所有框架兼容吗？

兼容。这是不依赖任何特定框架的标准 CSS：您可以把它粘贴到普通样式表中，改写成工具类，或者在项目使用 Tailwind 或 styled-components 时手动转换成相应的写法。

渲染效果和代码都在您的浏览器中实时生成，不会向服务器发出任何请求。