纯CSS按钮点击缩放反馈需将transition: transform 0.15s ease写在默认状态，而非仅:active中；否则无动画。需配合cursor: pointer、touch-action: manipulation及≥44×44px点击区域，并用scale(0.95)与transform-origin: center避免抖动和模糊。
纯 CSS 实现按钮点击缩放反馈，transition: transform 必须写在默认状态里，否则点下去就是“啪一下”缩完弹回，根本没动画。
为什么写了 transform: scale(0.95) 却没动画？
因为 transform 本身不带过渡，它只是个静态变换。动画效果完全依赖 transition 声明——而且必须写在按钮的常态规则中，不能只塞进 :active 里。
-
:active { transform: scale(0.95); }单独存在 → 点下去瞬间缩，无缓动，松手突兀弹回 - 正确写法：在
button或.btn默认样式里加transition: transform 0.15s ease;，再配:active { transform: scale(0.95); } - 别用
transition: all 0.15s;—— 它会让浏览器监听所有属性变化，拖慢响应，还可能把文字渲染搞模糊
移动端点不动 :active 怎么办？
iOS Safari 默认禁用 :active 样式，尤其对没交互暗示的元素。这不是 bug，是浏览器策略，得手动“唤醒”它。
- 给按钮加
cursor: pointer;（哪怕只是style="cursor: pointer"） - 或加空
onclick属性：<button onclick="">，现代 Safari 会因此启用:active - 更稳妥：补
touch-action: manipulation;，既消除 300ms 点击延迟，又防止误触滚动 - 确保点击区域 ≥44×44px，小按钮靠
padding扩展热区，别只靠scale拉视觉大小
scale(0.95) 缩放后文字模糊、边缘锯齿怎么修？
这是高 DPR 设备（如 iPhone、MacBook）上非整数缩放叠加渲染插值导致的，不是代码写错了。
立即学习“前端免费学习笔记（深入）”；
- 缩放值建议固定用
scale(0.95)：低于0.9容易触发 subpixel rendering 失效，文字发虚；高于0.98用户几乎感知不到反馈 - 可加
will-change: transform;提前提示合成层，但别滥用——会增加内存开销 - 如果按钮含图标或文字居左，显式声明
transform-origin: center;避免默认原点差异导致“偏移抖动” - 别在
:active里改border-radius或font-size，缩放后圆角像素值不变，视觉上会显得更“尖”
真正难的不是写出 scale(0.95)，而是让那个“按下瞬间”的视觉变化，在各种设备上都准时触发、缩放不抖、松手不粘滞——这些细节藏在 cursor、role、touch-action 和真机反复触摸测试里。
