如何使用CSS制作3D按钮？求助可行实现方案

实现思路 #

通过多层box-shadow模拟按钮的凸起厚度，配合伪元素添加高光，再加上点击时的位移动画，还原示例中的立体效果，完全替代图片背景方案（避免尺寸适配、交互缺失等问题）。

完整代码 #

HTML结构

<button class="3d-button">Click Me</button>

CSS样式

/* 核心按钮样式 */
.3d-button {
  position: relative;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background-color: #8a4412;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* 双层阴影构建立体基底：深色下边框+模糊阴影 */
  box-shadow: 
    0 4px 0 #69330f,
    0 6px 12px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
}

/* 顶部高光：模拟凸起的反光效果 */
.3d-button::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), transparent);
  border-radius: 3px 3px 0 0;
}

/* 按压交互效果 */
.3d-button:active {
  transform: translateY(2px);
  box-shadow: 
    0 2px 0 #69330f,
    0 3px 6px rgba(0, 0, 0, 0.35);
}

关键细节说明 #

• 用position: relative为伪元素提供定位基准，确保高光始终贴合按钮顶部
• 多层box-shadow分别负责模拟按钮的"凸起边框"和"环境阴影"，比单一阴影更接近真实立体效果
• ::before的渐变高光只覆盖按钮上半部分，强化凸起的光影感
• active状态通过位移和调整阴影大小，实现按压下去的真实反馈

内容的提问来源于stack exchange，提问作者amine boumaiza