CSS 制作鼠标经过就变立体的按键

要使用CSS制作鼠标经过时变成立体按钮的效果，可以使用CSS3的3D转换和过渡效果。以下是一个简单的示例：

HTML:

<button class="button">Hover Over Me</button>

CSS:

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.3s; /* 过渡效果 */
}
 
.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  transform: translateY(0) rotateX(0deg); /* 3D转换 */
}

这段代码中，.button:hover 选择器定义了鼠标悬停在按钮上时的样式。box-shadow 属性增加了按钮的阴影，transform 属性使按钮在X轴(旋转)和Y轴(平移)上进行3D变换，从而创建立体效果。