用CSS代码输出一个3D按钮

好的，以下是一段CSS代码可以实现一个简单的3D按钮效果：

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: 0 3px 0 #0056b3;
  transform: translateZ(0);
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
  box-shadow: 0 2px 0 #0056b3;
  transform: translateZ(-10px);
}

解释一下每个属性的作用：

- `display: inline-block;`：使按钮可以在一行内显示而不是换行。
- `padding: 10px 20px;`：设置按钮内边距，这里是10px上下边距和20px左右边距。
- `background-color: #007bff;`：设置按钮的背景颜色为蓝色。
- `color: #fff;`：设置按钮文字颜色为白色。
- `border: none;`：去掉按钮的边框。
- `border-radius: 5px;`：设置按钮的边框圆角为5px。
- `box-shadow: 0 3px 0 #0056b3;`：设置按钮的阴影，使按钮看起来有立体感。
- `transform: translateZ(0);`：设置按钮的Z轴位移为0，为了后面的3D效果做准备。
- `transition: all 0.3s ease;`：设置按钮的过渡效果，让按钮的改变更加平滑。

当鼠标悬停在按钮上时，会触发`:hover`伪类，此时按钮的颜色、阴影和位置都会发生改变，从而实现3D效果。