2026 按钮设计指南：真正会被点按的状态
按钮是 UI 变成动作的地方。本指南拆解常态、悬停、聚焦、按下四态，外加禁用与加载态，配上动效规则和一份让平庸按钮变得可点的检查清单。
约 8 分钟
按钮是一个承诺
用户不读按钮，他们感受按钮。一个慢了 120ms 响应的按钮读起来像坏的；一个悬停时位移 1px 的按钮摸起来是可触的。让站点显得高级最快的方式，是让每个按钮都有意图——最便宜的方式是给它们状态。
五种状态，和各自该有的动效
- 常态——基线。对比度足够扛任何背景；绝不用灰上灰。
- 悬停——上移 1px 并抬升阴影，150–200ms 缓出。避免缩放，那显得花哨。
- 聚焦——绝不移除。2px 描边加 2px 间隙，胜过融进背景的 1px 边框。
- 按下——下压 1px，收紧阴影，80ms。点击应该物理化，而非装饰化。
- 禁用——40% 透明度并改光标；绝不让死按钮满对比度装活。
- 加载——换成 spinner 或微光条，绝不用冻结的按钮吞掉点击。
如果你的悬停过渡超过 200ms，那它不是悬停，是宣告。
替你干活的组件
好的按钮系统建一次、处处复用。这些资源库条目自带状态、动效与减弱动效回退，你无需为每个屏幕重建。
✦磁吸渐变按钮指针追踪悬停，渐变填充。✦开关组件读作两种状态加一段动效，而不是一个复选框。✦单选卡片选择态清晰的可选卡片。✦状态药丸语义状态色，任何表面都保持可读。检查清单
- 每个可交互元素都定义了五种状态？
- 悬停/按下动效低于 250ms？
- 聚焦描边 2px、间隙 2px 可见？
- 禁用元素用透明度，而非看起来可点的灰色？
- 减弱动效去掉了 transform，保留了反馈？