css 凹凸按钮 |css结构 class

.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 3px 0 #0069d9;
transition: all 0.2s ease-in-out;
}
.button:hover {
box-shadow: 0 5px 0 #0062cc;
top: 2px;
}

首先，大家创建了一个具有一定样式的按钮元素，这包括背景色、文本颜色、边框等。然后，大家在按钮上添加了一个阴影效果，以模拟按钮凸起的效果。

接下来，大家使用transition属性来定义按钮的过渡效果，使得按钮在鼠标悬浮时能够平滑地过渡到新的样式状态。

最后，大家使用:hover伪类，定义了鼠标悬浮在按钮上时的新样式。在这个新样式中，大家将阴影的位置调整了一下，并且添加了一个简单的动画效果。

这就是CSS凹凸按钮的基本实现方法。您可以根据实际场景和需求进行调整和改进，创造出更加丰富和有趣的按钮样式。