CSS如何使得按钮按下时有被压下的视觉过渡

button:active 伪类需配合默认状态下的 transition 才有过渡效果，否则为瞬时切换；移动端需解决 300ms 点击延迟问题，推荐用 pointer 事件手动控制按压态，并慎用 scale、避免 border-radius 过渡。

button:active 伪类必须配合 transition 才有过渡效果

直接写 button:active { transform: translateY(2px); } 不会动——因为没声明过渡属性。css 过渡只响应可动画的属性变化，且必须在「非 :active 状态」上定义 transition，否则浏览器认为这是瞬间切换。

• transition 要写在默认状态（比如 button 或 button:not(:active)），不能只写在 :active 里
• 推荐只过渡 transform 和 background-color，避免触发布局重排；别用 top/left 或 margin
• 移动端需加 touch-action: manipulation 防止点击延迟导致 :active 失效

移动端 click 延迟会让 :active 看不见

ios safari 和部分安卓浏览器默认有 300ms 点击延迟，:active 样式往往刚闪一下就没了，用户根本感知不到“按下”。这不是代码写错了，是浏览器行为。

• 加 meta name="viewport" content="width=device-width, initial-scale=1, touch-action: manipulation" 是基础
• 更可靠的是用 pointerdown + pointerup + pointercancel 手动控制 class（比如 is-pressed）
• 若用框架（React/Vue），优先监听 onPointerDown 而非 onClick 来触发视觉反馈

transform: scale() 比 translateY() 更符合物理直觉

真实按钮被按下去，不只是往下移，还会轻微收缩、边缘变实——单靠 translateY() 显得“漂”。

• 推荐组合：transform: translateY(1px) scale(0.98)，再配 box-shadow: inset 0 1px 3px rgba(0,0,0,0.2)
• scale 要慎用：如果按钮内有文字或图标，缩得太狠（如 scale(0.9)）会导致文字模糊，建议控制在 0.97–0.99 区间
• 别对 border-radius 做过渡——它无法硬件加速，会掉帧

不要依赖 :active 模拟长按反馈

:active 只在鼠标按下/手指按住期间生效，松开立刻还原。想实现“按住 500ms 后变色”，它做不到。

立即学习“前端免费学习笔记（深入）”；

• 长按检测必须用 js：setTimeout 监听 pointerdown，并在 pointerup/pointercancel 中 clearTimeout
• 用 will-change: transform 提前告知浏览器该元素要动画，但仅在复杂界面中必要，日常按钮不用加
• 如果按钮是 disabled 状态，:active 完全不触发——记得单独定义 button:disabled:active（虽然通常也不需要动）

过渡本身不难，难的是不同设备下 :active 的触发时机、持续时间和渲染一致性。尤其在混合了 touch / mouse / pen 输入的设备上，纯 CSS 方案很容易漏一两种情况。