【3D按钮】你的按钮是3d的吗？

在网页开发中，常规的按钮。都是平面2d质感的。比如说，长这样

上面的按钮，是组件库常见的按钮。点击的时候，也没点击那种按下的质感。总觉得缺了点什么。能不能让按钮更像按钮呢？

于是他来了：

话不多说，直接上代码

<div class="basebtn btn-3d-ed4014" style="height:36px;width:67.5px;">停止</div>
.basebtn{
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 8px;
  position: relative;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  outline: none;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
  user-select: none;
  color: #fff;
}
.btn-3d-ed4014 {
  background: linear-gradient(to bottom, #f7a39c, #ed4014); /* 使用渐变色 */
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #cc2f11, /* 使用稍深的阴影 */
    0 4px 6px rgba(0, 0, 0, 0.2);
}
.btn-3d-ed4014:hover {
  background: linear-gradient(to bottom, #fcbdb2, #ec5729); /* 鼠标悬停时使用浅一点的渐变 */
}
.btn-3d-ed4014:active {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 1px 0 #d44b1a, /* 活跃状态阴影稍深 */
    0 1px 0 #a42f12, /* 更深的阴影效果 */
    0 1px 4px rgba(0, 0, 0, 0.2);
}

在线看效果：codepen.io/zealouszhou…