要创建立体化的按钮效果,可以使用CSS来实现。下面是一个示例代码:

HTML代码:
html

CSS代码:
css
.button {
border: none;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: background-color 0.3s;
}

.button::before {
content: "";
background-color: rgba(255, 255, 255, 0.4);
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
transform: rotate(45deg);
transition: transform 0.3s;
z-index: -1;
}

.button:hover {
background-color: #45a049;
}

.button:hover::before {
transform: rotate(225deg);
}

这个示例代码使用了伪元素::before来创建一个旋转角度为45度的正方形,作为按钮的背景。在鼠标悬停时,背景元素的旋转角度会从45度变为225度,从而形成立体化的效果。按钮的颜色和其他样式可以根据需要进行调整。