按钮按下跳变的根源是混用transform与layout属性导致重排，正确做法是仅用transform: scale()配合transition: transform声明在默认状态，避免padding/border等触发reflow。
按钮按下时尺寸跳变，通常是因为 transform: scale() 和其他影响布局的属性（比如 padding、border、width/height）混用，导致浏览器在 :active 状态下重排（reflow），破坏了 transition 的连贯性。
只用 transform + transition，别动 layout 属性
scale 是纯绘制层变换，不触发重排。一旦你在 :active 里改 padding 或 margin，浏览器就得重新计算布局，transition 就会“卡”或“跳”。
- ✅ 正确做法：只用
transform: scale(0.95)配合transition: transform 0.15s ease - ❌ 错误示范：
:active { padding: 6px 14px; transform: scale(0.95); }—— padding 改变会跳
确保 transition 在默认状态就声明
transition 写在默认（非 :active）状态才生效。如果只写在 :active 里，鼠标按下时 transition 不会启动，松开时才开始动画，体验反直觉。
- ✅ 推荐写法：
button { transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); } - ✅ :active 只负责目标值：
button:active { transform: scale(0.96); } - ⚠️ 注意：避免用
all，容易误触其他属性动画，写明transform更安全
处理 border/padding 视觉“缩放错觉”
即使没改 padding，如果按钮有较粗 border，scale 后边框会视觉变细（因为整个元素缩放，border 宽度不变），显得“变薄”或“发虚”。可配合 border-width 微调，但更稳妥的是：
立即学习“前端免费学习笔记（深入）”；
- 用
box-sizing: border-box（确保默认已设） - 把 border 换成
outline（outline 不参与布局，缩放时视觉更一致） - 或直接去掉 border，靠阴影（
box-shadow）模拟按压凹陷感，例如：:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); }
移动端额外注意：禁用默认点击高亮 & 防止延迟
手机上点击可能有 300ms 延迟或灰色背景，干扰 scale 效果。
- 加
-webkit-tap-highlight-color: transparent;去掉高亮 - 给按钮加
cursor: pointer和touch-action: manipulation;提升响应感 - 必要时用
active伪类 + JavaScript 添加 class（兼容老安卓）
基本上就这些。核心就一条：让按压纯粹是 transform 动画，不碰任何影响盒模型的属性。自然、轻量、无跳变。
