纯CSS实现一个3D按钮

效果：

代码：

html：

<div class="btn">3D</div>

css：

body{
  background:#229FFD;
}
.btn{
  font-weight:bold;
  font-size:25px;
  background:#fff;
  display:inline-block;
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
  border-radius:100%;
  margin:50px;
  box-shadow:
    0 10px 0 #e0e0e0,
    0 15px 2px rgba(0,0,0,0.2);
  cursor:pointer;
  transition:all 0.2s;
}
.btn:active{
  transform:translateY(8px);
  box-shadow:
    0 2px 0 #e0e0e0,
    0 4px 2px rgba(0,0,0,0.3);
}