css怎么做按钮3d效果 |制作css工具

.button {
width: 200px;
height: 50px;
margin: 20px auto;
position: relative;
overflow: hidden;
border-radius: 10px;
}
.button:before {
content: '';
position: absolute;
top: 100%;
left: -25%;
width: 150%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transform: rotate(-45deg);
transition: all 0.3s;
}
.button:hover:before {
top: 0%;
left: -25%;
}
.button:active:before {
top: -100%;
left: 0%;
}

首先需要给按钮一个基本的样式，包括宽度、高度、位置等。然后，在按钮上添加一个伪元素:before，用于设置按钮的立体效果。在伪元素中设置背景颜色、高度、宽度、旋转角度等样式，然后通过:hover和:active伪类来控制伪元素的位置，从而使得按钮有立体感的效果。

以上就是通过CSS实现按钮3D效果的方法，如需实现具体效果，可根据实际情况对上述代码进行更改。希望对大家有所帮助！