css实现立体按压感的按钮

可以使用CSS3的box-shadow属性和transform属性来实现立体按压感的按钮效果。具体实现步骤如下：

1. 首先，我们需要定义一个按钮的样式，如下：

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

2. 然后，使用box-shadow属性来添加按钮的立体效果，代码如下：

button {
  /* ... */
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

这会在按钮底部添加一个阴影，使其看起来更具立体感。

3. 接下来，我们可以使用transform属性来实现按钮的按压效果。当按钮被点击时，我们将对其进行缩放，并向下移动一定的距离，代码如下：

button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

这会使按钮在被点击时向下移动1像素，并缩小2%的大小。同时，我们还使用box-shadow属性添加了一个更浅的阴影，以增强立体感。

最终，完整的代码如下：

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

这样，我们就成功地使用CSS实现了立体按压感的按钮效果。