[分享]css3按钮切换图片

CSS3按钮切换图片是一种简单而美观的效果，其实现原理是使用CSS3的:hover伪类来控制图片的显示与隐藏。.button { display: inlineblock; / 将按钮元素改为行内元素...

CSS3按钮切换图片是一种简单而美观的效果，其实现原理是使用CSS3的:hover伪类来控制图片的显示与隐藏。

.button {
  display: inline-block;    /* 将按钮元素改为行内元素 */
  padding: 10px 20px;       /* 设置按钮的内边距 */
  border: none;             /* 去除按钮的边框 */
  background-color: #0099FF;   /* 设置按钮的背景色 */
  color: #FFFFFF;           /* 设置按钮的文字颜色 */
}
.button:hover {
  background-color: #0077CC;   /* 鼠标悬停时按钮背景色变为深蓝色 */
}
.button:hover img {
  display: none;            /* 鼠标悬停时隐藏图片 */
}
.button:hover span {
  display: block;           /* 鼠标悬停时显示文本内容 */
} 

上述代码中，我们首先定义了一个按钮样式，其中包括按钮的内边距、边框、背景色和文字颜色等属性。然后使用:hover伪类来控制鼠标悬停时按钮的背景色，并隐藏按钮中的图片。同时，我们使用span标签来包裹按钮中需要显示的文本内容，并通过display:block将其显示出来。

使用这种方法可以方便地实现按钮的切换效果，不需要使用javascript或其他脚本语言，而且只需要简单的CSS代码即可完成。