3D 按压按钮（4 款立体按压动效 CSS）

效果演示（真实可交互）

「按压感」是 3D 按钮的灵魂：按下时按钮整体下沉、底部色块消失，松手后弹回原位。演示区 4 款覆盖四种风格：经典色块适合主操作、厚底边框适合白底界面、浮雕适合工具类面板、倾斜弹起适合活泼的营销场景。长按任意按钮体验完整行程。

完整代码

① 经典 3D 块状按压（最经典的物理模型）：

<button class="btn-3d">按下我</button>

.btn-3d {
  border: 0; padding: 14px 30px; border-radius: 12px; color: #fff;
  font-weight: 700; cursor: pointer;
  background: linear-gradient(180deg, #6c8cff, #5b76f2);
  /* 关键：6px 高的同色系「底块」 + 投影 */
  box-shadow: 0 6px 0 #3d54d6, 0 10px 16px rgba(61,84,214,.35);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-3d:active {
  transform: translateY(6px);           /* 下沉距离 = 底块高度 */
  box-shadow: 0 0 0 #3d54d6, 0 4px 8px rgba(61,84,214,.3);
}

③ 浮雕内阴影（适合浅色工具面板，按下变平）：

.btn-emboss {
  border: 0; padding: 14px 30px; border-radius: 12px;
  background: #eef1f8; color: #5b657f; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.9),   /* 上部受光 */
              inset 0 -3px 6px rgba(20,30,70,.12),   /* 下部阴影 */
              0 4px 8px rgba(20,30,70,.08);
  transition: box-shadow .08s ease, transform .08s ease;
}
.btn-emboss:active {
  box-shadow: inset 0 4px 8px rgba(20,30,70,.18), 0 1px 2px rgba(20,30,70,.1);
  transform: translateY(1px);
}

②④ 款（厚底边框、倾斜弹起）与 ① 同构：都是「正常态大 box-shadow + :active 位移归零」，只是把底块换成了边框色或加了悬停旋转，完整样式见演示区 .p3-* 系列。

参数说明

兼容性与性能

• 纯 CSS 实现，无 JS、无图片，任何现代浏览器开箱即用
• 动画仅使用 transform 与 box-shadow，transition 时长极短，性能开销可忽略
• 浮雕款的多层 inset 阴影在低端设备上首次绘制稍慢，但仅绘制一次，不影响交互
• 建议配合 :focus-visible 添加键盘焦点样式，保证无障碍可达性

常见问题

Q: 能商用吗？ 可以。本组件为粤喵自研，免费商用无需署名。

Q: 按压下沉不平滑？ 检查 translateY 是否与底块高度（box-shadow 第一层）完全一致。比如底块 6px，下沉就必须恰好 6px，否则会跳变或悬空。

Q: 想让按钮更大更立体？ 加大底块高度（如 8-10px），同时成比例加大投影模糊与透明度，按钮会显得「更厚」。

Q: 键盘用户怎么看到按下状态？ 给 .p3-block:focus-visible 加 outline 或 box-shadow 高亮；同时 :active 在键盘触发时也有效，回车即可看到按压反馈。