按钮可能是界面里最小的完整交互单元——它有外观、有状态、有反馈，还要照顾键盘和读屏。很多新手把按钮当成"一段好看的样式"，却忽略了它背后的状态机。这一节我们把按钮拆成状态、尺寸、变体、圆角阴影与可访问性五个维度，每个维度都给出可直接落地的 CSS。

为什么按钮是 UI 的"最小完整单元"

一个按钮要同时承担三件事：告诉用户这里可以点、点下去之后会发生什么、以及当前能不能点。这三件事分别对应按钮的视觉外观、交互反馈和禁用状态。如果你只设计了默认外观，用户在 hover 时看不到任何变化，就会怀疑"这个按钮到底能不能点"。所以按钮设计的第一原则不是好看，而是"状态完整"。

按钮的四种核心状态

一个成熟按钮至少要覆盖 default、hover、active、disabled 四种状态，必要时还要加上 loading。每种状态都要有明确的视觉差异，但差异要克制——hover 不要突然变色，active 不要突然位移太多，否则会显得跳脱。

• default：静止状态，传递"可点击"的视觉权重。
• hover：鼠标悬停，轻微上浮加阴影增强，暗示可交互。
• active：按下瞬间，回弹归位，模拟物理按压。
• disabled：降低对比、禁止指针，明确告知"现在不能点"。
• loading：提交中，隐藏文字、显示转圈，避免重复点击。

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  background: linear-gradient(135deg, #A8D5BA, #7FB069);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(74, 124, 58, 0.25);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(74, 124, 58, 0.2);
}
.btn:disabled {
  background: #EDE7D6;
  color: #8A9690;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

按钮尺寸

尺寸不是拍脑袋决定的，而是跟着使用场景走。移动端拇指操作需要更大的命中区域，桌面端密集表格里则需要紧凑按钮。建议建立 sm、md、lg 三档，并通过 CSS 变量统一管理，避免散落的魔法数字。命中区域在任何场景下都不应小于 40×40 像素，否则误触率会明显上升。

.btn-sm { padding: 8px 18px;  font-size: 13px; }
.btn-md { padding: 12px 28px; font-size: 14.5px; }
.btn-lg { padding: 16px 38px; font-size: 16px; }

三种主要变体

一个页面里按钮不能全都长一样，否则用户分不清主次。常用的做法是定义 primary、secondary、ghost 三种变体：primary 用于核心转化（提交、保存、结算），secondary 用于次级操作（取消、返回），ghost 用于最轻量的辅助操作（筛选、更多、展开）。三种变体的视觉权重应当依次递减，让用户一眼看出"最该点的是哪个"。

.btn-primary   { background: linear-gradient(135deg, #A8D5BA, #7FB069); color: #fff; }
.btn-secondary { background: #FBF9F2; color: #4A7C3A; border: 1.5px solid #A8D5BA; }
.btn-ghost     { background: transparent; color: #4A7C3A; border: 1.5px solid transparent; }
.btn-ghost:hover { background: #E4F0DC; }

圆角与阴影

圆角决定按钮的气质：直角硬朗、小圆角克制、全圆角柔和。尧图的湿巾温柔风默认使用全圆角（border-radius: 999px），配合柔和的绿色阴影，让按钮看起来"软乎乎可按压"。阴影颜色不要用纯黑，用主色系的低透明度绿，整体会更融洽，也不会让按钮下方出现灰蒙蒙的脏感。

可访问性

按钮是键盘用户的主要操作入口，必须保证焦点可见。用 :focus-visible 而非 :focus，这样鼠标点击时不会出现焦点环，但键盘 Tab 时会清晰高亮。同时确保文字与背景对比度不低于 4.5:1，图标按钮要带 aria-label，让读屏软件能读出按钮的用途。

.btn:focus-visible {
  outline: 3px solid rgba(127, 176, 105, 0.5);
  outline-offset: 2px;
}
.btn.loading { color: transparent; pointer-events: none; }
.btn.loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }