按钮按压效果
按压效果：按钮按下去时整体缩小 2%~4% 并加深阴影，像实体按键被按下。靠 :active 伪类零延迟响应，是最廉价也最有效的“物理反馈”。
如果想要“Q 弹”手感，用 cubic-bezier(.34,1.56,.64,1) 过冲缓动；若用 JS 加 class 处理 mousedown/mouseup，还能做长按持续反馈。
- :active { transform: scale(.96) } 是最简按压效果
- 阴影同步收紧：.button(down) 阴影变小更贴地
- 过冲缓动 cubic-bezier 让松手有“弹回”手感
HTML
<style> .push { display: block; width: 200px; margin: 50px auto; padding: 14px 0; border: none; border-radius: 12px; background: linear-gradient(135deg,#4a9eff,#a371f7); color: #fff; font-size: 16px; cursor: pointer; box-shadow: 0 8px 18px rgba(167,113,247,.4); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease; } .push:active { transform: scale(.95); box-shadow: 0 3px 8px rgba(167,113,247,.4); } </style> <button class="push">按一下</button>
本节要点按压 = :active 缩放 + 阴影收紧；过冲缓动带来 Q 弹手感。
