css实现3D效果的按钮

1. css 代码

1.1 初步

.btn{
  color: #fff;
  border: 0;
  font-size: 18px;
  outline: none;
  padding: 5px 10px;
  background: #ace;
  border-radius: 4px;
  /* 设置文字阴影 */
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  /* 设置盒子阴影 */
  box-shadow: 0 4px 0 #9cb8d8, 0 3px 20px rgba(0,0,0,0.3);
  /* 交互性 */
  cursor: pointer;
}

.btn:active {
  /* 按钮按下去之后周围的光源应该没那么强烈了，所以可以考虑适当减少阴影 */
  text-shadow: 0 -1px 0 rgba(0,0,0,.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
  position: relative;
  top: 3px;
}

1.2 比例（阴影部分也按照比例放大）

.btn {
  color: #fff;
  border: 0;
  font-size: 18px;
  outline: none;
  padding: 0.278em 0.556em;
  background: #ace;
  border-radius: 0.22em;
  /* 设置文字阴影 */
  text-shadow: 0 -0.056em 0 rgba(0,0,0,.3);
  /* 设置盒子阴影 */
  box-shadow: 0 0.22em 0 #9cb8d8, 0 0.167em 1.11em rgba(0,0,0,0.3);
    /* 交互性 */
  cursor: pointer;
}

.btn:active {

  /* 按钮按下去之后周围的光源应该没那么强烈了，所以可以考虑适当减少阴影 */
  text-shadow: 0 -0.056em 0 rgba(0,0,0,.1);
  box-shadow: 0 0 0.556em rgba(0, 0, 0, 0.5) inset;
  position: relative;
  top: 0.167em;
}

  //最终我们可以根据字体大小来调整button的大小，阴影部分也会随着增大减小。
.btn {
  margin-left: 30px;
}

.btn-md {
  font-size: 30px;
}

.btn-lg {
  font-size: 50px;
}

2. html代码

<button class="btn">保存</button>
<button class="btn btn-md">保存</button>
<button class="btn btn-lg">保存</button>

效果

3. 兼容性

text-shadow 不兼容IE10以下浏览器
box-shadow不兼容IE9以下浏览器