示例中显示的CSS中的按钮渐变或阴影效果3D

Question

我正在寻找渐变或阴影效果（我不知道到底是哪个），例如：

感谢您的帮助。

Answer 1

这是一个使用渐变和边框近似的想法，只需根据需要调整颜色即可。

.button {
  display:inline-block;
  padding:10px 20px;
  background:linear-gradient(#ffa797,#e95648);
  box-shadow:0px 1px 2px 2px #ccc;
  position:relative;
  color:#fff;
  z-index:0;
}
.button:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  border-right:15px solid rgba(255,255,255,0.4);
  border-left:15px solid rgba(0,0,0,0.5);
  border-top:19px solid rgba(255,255,255,0.2);
  border-bottom:19px solid rgba(0,0,0,0.2);
}

<div class="button">some text</div>