交互细节拉满：HTML按钮被按下时的微弱下陷动画-html教程-PHP中文网

按钮按下无下陷感主因是浏览器限制：ios safari默认禁用:active，需添加cursor:pointer和touch-action: manipulation；关键在cubic-bezier(0.2,0,0.1,1)与0.12s过渡及transform: translatey(1px)等视觉欺骗组合。

交互细节拉满：html按钮被按下时的微弱下陷动画

按钮按下时为什么没有下陷感

纯 CSS 实现的“下陷”效果本质是视觉欺骗：通过 transform: translateY(1px) 模拟按压位移，配合阴影收缩和边框变暗。但多数人直接写 :active 时失效，核心原因是浏览器默认会阻止长按或快速连点下的多次触发，且部分移动端会禁用 :active 伪类（尤其 iOS Safari）。

必须确保按钮有 cursor: pointer，否则某些浏览器不激活 :active
移动端需添加 touch-action: manipulation，否则 iOS Safari 可能跳过 :active
避免在父容器上设 overflow: hidden，它可能裁掉位移后的阴影或边框

用 :active 实现可靠下陷的最小 CSS

下面这段代码在桌面和主流移动浏览器中都能稳定触发，重点控制了过渡节奏和视觉反馈强度：

.btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.12s cubic-bezier(0.2, 0, 0.1, 1);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  border-color: #999;
  background: #f8f8f8;
}

注意：cubic-bezier(0.2, 0, 0.1, 1) 是关键——它让动画开头稍快、结尾带点收束感，比 ease-out 更接近物理按压回弹；0.12s 是临界值，短于 0.1s 显得太急，长于 0.15s 就像卡顿。