用 scale 配合 transition 或 keyframes 实现按钮按压反馈最轻量自然：:active 状态缩放 0.94–0.96，过渡时间 0.08s–0.15s，配合阴影变重、亮度微调及硬件加速，兼顾性能与真实感。
想让按钮点击时有按压反馈，用 scale 配合 keyframes 是最轻量、兼容性好又自然的方式。核心思路是：鼠标按下时缩小按钮，松开后平滑恢复，配合过渡（transition）或动画（@keyframes）就能做出真实的手感。
用 transition + transform 实现简洁按压效果
不需要 keyframes 也能做好——直接监听 :active 状态，靠 transform: scale() 和 transition 完成。适合大多数场景，代码少、性能高、响应快。
- 给按钮加
transition: transform 0.1s ease（时间可调，0.08s–0.15s 最接近真实触感） - 在
button:active里写transform: scale(0.96)（缩放 4% 左右最自然，太大显浮夸，太小难察觉） - 记得加上
will-change: transform或transform: translateZ(0)触发硬件加速，避免卡顿
用 @keyframes 做更精细的按压动画
如果需要带“下陷感”或“回弹延迟”，比如先快缩再微弹，就用 keyframes 控制节奏。注意别过度设计，轻微物理感才耐看。
- 定义动画：@keyframes pressDown { 0% { transform: scale(1); } 50% { transform: scale(0.94); } 100% { transform: scale(1); } }
- 绑定到
:active：animation: pressDown 0.2s ease-out forwards; -
forwards确保动画结束停在最终状态（虽然这里终点是 scale(1)，但加上更稳妥） - 慎用
infinite或循环，按压动画只应触发一次
增强真实感的小细节
单靠缩放还不够“像按下去”，加点配套变化会让反馈更可信：
立即学习“前端免费学习笔记（深入）”；
- 同步微调阴影：
box-shadow: 0 2px 4px rgba(0,0,0,0.15)→:active里改成0 1px 2px rgba(0,0,0,0.2)（变短变重） - 背景色轻微变深（尤其浅色按钮），用
filter: brightness(0.96)比改background-color更安全（不影响渐变） - 禁用默认焦点 outline（如
outline: none），改用box-shadow: 0 0 0 2px #007bff自定义，保持可访问性
基本上就这些。scale 按压不复杂但容易忽略节奏和幅度——记住：小幅度（±3%~5%）、短时间（≤0.15s）、带 easing，比炫酷更重要。
