最轻量方式是按钮默认样式设transition，:active中设transform: scale()；禁用width/height因触发重排、挤压内容；JS控制需用class切换而非内联样式。
按钮点击时用 transform: scale() 实现平滑缩小
直接给按钮加 :active 伪类配合 transform: scale() 是最轻量、兼容性最好的方式，不需要 JS。关键在于过渡必须定义在默认状态（非 :active），否则点击瞬间会无动画。
常见错误是把 transition 写在 :active 里——这会导致鼠标按下时没过渡，松开才过渡回原大小，完全反直觉。
-
transition必须写在按钮的默认样式中（比如button或.btn） - 缩放值建议用
scale(0.95)这类轻微变化，太小（如0.7）容易误判为点击失败 - 过渡时间控制在
0.15s–0.2s比较自然，超过0.25s会有延迟感
button {
transform: scale(1);
transition: transform 0.18s ease;
}
<p>button:active {
transform: scale(0.96);
}为什么不用 width/height 缩放？
改 width 和 height 会触发重排（reflow），性能差，尤其在滚动中点击按钮时可能卡顿；而 transform 只触发重绘（repaint），且能被 GPU 加速。
另外，width/height 缩放会挤压内部文字和图标，导致模糊或错位；transform: scale() 是纯视觉变换，不影响布局流，子元素比例保持一致。
立即学习“前端免费学习笔记（深入）”；
- 如果按钮内有
border-radius，transform缩放后圆角依然平滑；用width/height则可能锯齿 - 移动端 Safari 对
transform的支持稳定，但部分老 Android WebView 对width动画有渲染 bug
需要 JS 控制缩放状态怎么办？
比如按钮点击后保持缩小状态（如已选中），或配合异步操作（如提交中禁用并缩放）。这时不能只靠 :active，得用 class 切换。
核心是：CSS 过渡仍写在基础选择器上，JS 只负责增删 class，不操作内联样式。
- 定义一个
.is-pressed类，样式同:active中的transform - JS 里用
element.classList.toggle('is-pressed')或.add()/.remove() - 避免同时存在
:active和.is-pressed，否则可能冲突（浏览器按权重叠加）
button {
transform: scale(1);
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
<p>button.is-pressed {
transform: scale(0.94);
}</p><p>/<em> 可选：禁用时进一步缩小 </em>/
button:disabled {
transform: scale(0.9);
}移动端点击区域变小的问题
缩放后按钮视觉尺寸变小，但点击热区（hit area）默认还是原始大小。用户点到“看起来缩小了的边缘”时仍能触发，这是正常行为，一般无需处理。
但如果按钮本身很小（比如 32px × 32px），缩放到 0.9 后视觉上只剩 28.8px，可能影响触控精度。此时应优先增大原始尺寸，而不是调高缩放比。
- 推荐最小点击区域为
44px × 44px（iOS 人机指南），可设min-width/min-height保证 - 不要用
padding撑大再缩放——transform不影响 padding，缩放后 padding 会等比缩小，反而让内容更挤 - 真要扩大热区，用
::after伪元素 +position: absolute扩展点击范围，不影响视觉缩放
真正要注意的是：缩放动画是否在所有目标设备上都启用。某些旧版微信内置浏览器会忽略 transform 过渡，测试时务必真机验证。
