css 切换图片 按钮 |css modules 多个class

.btn {
display: inline-block; /* 将按钮变成块元素，可以设置宽度和高度 */
width: 100px;
height: 50px;
background-image: url('btn.png'); /* 设置按钮的背景图片 */
background-position: 0 0; /* 设置背景图片的位置 */
text-indent: -999px; /* 隐藏按钮文本 */
}
.btn:hover {
background-position: 0 -50px; /* 当鼠标移上去时，切换图片 */
}

上面的代码示例中，.btn类定义了一个具有背景图片的按钮。通过设置background-image属性指定了按钮的背景图像，使用background-position属性设置背景图像在按钮中的位置。使用text-indent: -999px属性将按钮文本隐藏。

当鼠标悬停在按钮上时，通过使用:hover伪类来切换按钮的图像。使用background-position属性将背景图像的位置设置为hover状态的位置，从而切换到另一幅图像。

在实际开发中，大家可以根据需要像上面的代码示例一样，设计和优化按钮图像和交互效果，适应不同的场景需求。