从零写好一颗 CSS 按钮样式

一颗按钮的代码量不大，但要让它既好看又点着舒服又对屏幕阅读器友好，要照顾的细节比想象中多。下面按我自己调按钮的顺序走一遍：先把静态形态定下来，再加交互态，最后补可访问性。文末有一段可以直接粘进项目的完整 CSS。

内边距和圆角决定第一眼的手感

按钮的"可点感"很大一部分来自留白。内边距太小，文字贴着边框，看起来像个标签而不是能按的东西。一个稳妥的起点是上下 12px、左右 24px，也就是 padding: 12px 24px;。垂直方向给文字呼吸空间，水平方向比垂直方向大一倍左右，整体比例就比较舒服。

圆角用 border-radius 控制。4px 偏方正、偏工具感；8px 到 12px 是现在大多数产品的中间值，既不死板也不会圆到像药丸；如果想要胶囊形，直接给一个很大的值比如 border-radius: 999px; 让两端自然变成半圆。想快速比对不同圆角的观感，可以在圆角生成器里拖一拖再回填到代码里。

填充色和渐变怎么选

纯色填充配一个对比足够的文字色，是最不会出错的方案，比如深色背景配白字。想要更有层次，可以换成渐变。一条从左上到右下的线性渐变 linear-gradient(135deg, #6366f1, #8b5cf6) 会让按钮多一点体积感。渐变的两个色不要差太远，同色系里挑深浅两档最稳。手调渐变角度和色标很费眼，用渐变生成器出一条再贴回来更快。

hover 和 active：让按钮"活"起来

静态的按钮再好看，点下去没反应就会让人觉得页面卡了。hover 态最常见的做法是轻微抬起加变亮：

transform: translateY(-2px); 让按钮向上浮一点
配一层更明显的投影表示它"离开了页面"
filter: brightness(1.05); 让颜色稍微提亮

active 态（按下的瞬间）要和 hover 反过来：把按钮压回去，transform: translateY(0); 甚至 translateY(1px);，投影收小。这一抬一压，眼睛就读成"按下去了"。关键是给这些属性加 transition，否则状态切换是硬跳的：transition: transform .15s ease, box-shadow .15s ease;。

阴影本身也值得单独调。一颗按钮上往往叠两层阴影，一层近、实，负责接地，一层远、虚，负责氛围。手算这两层的偏移和模糊很麻烦，盒阴影生成器可以直接出多层 box-shadow 字符串。

别漏掉对比度和焦点态

这两点最容易被跳过，但它们决定按钮能不能被所有人用。

对比度：文字色和填充色之间至少要达到 WCAG 4.5:1（正文级别）。浅灰底配白字是高频翻车点，看着"还行"但实际只有 2:1 左右，弱视用户根本读不清。定色时盯一眼对比度读数，红了就把文字调深或把背景调深。

焦点态：用键盘 Tab 切到按钮时，必须有看得见的轮廓，否则键盘用户完全不知道焦点在哪。不要用 outline: none; 一删了之。推荐用 :focus-visible 只在键盘聚焦时显示轮廓，鼠标点击时不打扰：

.btn:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

一段可以直接用的按钮 CSS

把上面的内边距、圆角、渐变、hover/active、焦点态拼起来，得到一颗完整的主按钮：

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font: 600 15px/1 system-ui, sans-serif;
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 4px 10px rgba(99, 102, 241, .35);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(99, 102, 241, .45);
  filter: brightness(1.05);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(99, 102, 241, .35);
}
.btn:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

粘进项目，给 <button class="btn"> 套上就能用。文字色 #ffffff 配这条紫色渐变的对比度过得了 4.5:1，键盘聚焦也有轮廓。

我自己第一次认真给一颗按钮配齐这五块（内边距、圆角、渐变、四个状态、焦点轮廓）时，发现手写最容易出错的不是颜色，而是 hover 和 active 的位移对不上，按下去要么没动静要么过头像抖动。后来我把这套流程固定下来：先在生成器里把视觉调到满意，再让它把多状态 CSS 一起导出，省掉来回猜数值的时间。

如果不想从头敲，CSS 按钮生成器能可视化地调内边距、圆角、填充、阴影深度，实时预览可悬停可按压，还带 WCAG 对比度读数和现成的 :hover / :active 导出，配色翻车前就能看到警告。

Made by Toolora · Updated 2026-06-13