用 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，比炫酷更重要。