如何为现有深色按钮添加逼真的3D按压点击视觉效果？

实现核心逻辑 #

• 用双层容器模拟按钮的「面」和「基座」：外层.prompt作为承载阴影的基座，内层.stim作为按钮可按压的顶面
• 多层阴影区分高光、主体投影、底部暗部，还原真实物理光影
• 按压状态通过transform位移和阴影同步变化，模拟按下后厚度压缩的视觉效果
• 添加短缓动过渡，避免状态切换生硬

完整修改后的CSS代码 #

.audio-controls {
  flex-direction: row;
  gap: 1226px;
  justify-content: center;
  width: 100%;
  position: absolute;
  top: 82%;
  left: 0%;
  z-index: 99;
}

.audio-controls .record {
  zoom: 0.042;
  transform: translate(0px, 40px);
  /*cursor: pointer;*/
}

.prompt {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 35px;
  /* 新增：基座底部阴影模拟厚度 */
  box-shadow: 0 10px 0 0 #0a0a0a, 0 12px 10px rgba(0,0,0,0.3);
  transition: all 0.1s ease;
}

.prompt .stim {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 124px;
  width: 126px;
  border-radius: 30%;
  background: linear-gradient(#2a292b, #111013);
  /* 替换原有单阴影：多层阴影模拟立体光影，上层高光、中间边缘、底部投影 */
  box-shadow: 
    inset 0 2px 2px rgba(255,255,255,0.1), 
    0 3px 0 #181719,
    0 5px 5px rgba(0,0,0,0.5),
    0 8px 10px rgba(0,0,0,0.2);
  transform: translateY(-6px);
  overflow: hidden;
  /* 新增过渡 */
  transition: all 0.1s ease-in-out;
  position: relative;
}

/* 新增：按压状态 可同时适配鼠标点击:active和JS控制的.active类 */
.prompt:active .stim,
.prompt.active .stim {
  transform: translateY(0);
  box-shadow: 
    inset 0 2px 2px rgba(255,255,255,0.05), 
    0 1px 0 #181719,
    0 2px 2px rgba(0,0,0,0.5),
    0 3px 4px rgba(0,0,0,0.2);
}

/* 新增：按压时基座同步缩小阴影，模拟整体下压 */
.prompt:active,
.prompt.active {
  box-shadow: 0 3px 0 0 #0a0a0a, 0 5px 6px rgba(0,0,0,0.3);
}

.stim p {
  color: #b9b7b7;
  font-family: "Open Sans Regular";
  font-size: .7em;
  margin-bottom: 4px;
  transition: color 0.1s ease-in-out;
  z-index: 1;
}

.prompt .stim i {
  font-size: 2em;
  color: #fff;
}

.prompt .stim::before {
  content: "";
  background-image: url(https://www.transparenttextures.com/patterns/carbon-fibre.png);
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  background-image: url(https://www.transparenttextures.com/patterns/ps-neutral.png);
}

空格按压适配（可选） #

如果需要实现按住空格触发按压效果，添加以下JS代码即可：

const btn = document.getElementById('start-recognition');
document.addEventListener('keydown', (e) => {
  if(e.code === 'Space' && !e.repeat) {
    btn.classList.add('active');
  }
});
document.addEventListener('keyup', (e) => {
  if(e.code === 'Space') {
    btn.classList.remove('active');
  }
});

效果说明 #

• 正常状态下按钮通过多层阴影呈现6px左右的悬浮厚度，内发光模拟顶面磨砂反光
• 按压时整体向下位移6px，阴影同步压缩，还原真实按钮按下后厚度变小、投影拉近的物理效果
• 0.1s的短过渡匹配真实按钮的按压反馈速度，不会出现拖沓感

内容的提问来源于stack exchange，提问作者Sara Ree