css制作按钮换图

使用CSS制作按钮换图效果

通过CSS可以实现鼠标悬停或点击时切换按钮图片的效果。以下是几种常见方法：

背景图片切换

利用:hover伪类改变背景图片：

.btn {
  width: 200px;
  height: 50px;
  background-image: url('normal.png');
  background-size: cover;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background-image: url('hover.png');
}

使用CSS Sprite技术

将多张按钮状态图片合并为一张，通过调整背景位置实现切换：

.btn {
  width: 200px;
  height: 50px;
  background: url('sprites.png') 0 0;
  border: none;
}

.btn:hover {
  background-position: 0 -50px;
}

图片标签切换

如果使用<img>标签，可以通过修改src属性：

.btn-img {
  opacity: 1;
  transition: opacity 0.3s;
}

.btn:hover .btn-img {
  opacity: 0;
}

.btn::after {
  content: '';
  position: absolute;
  background-image: url('hover.png');
  opacity: 0;
  transition: opacity 0.3s;
}

.btn:hover::after {
  opacity: 1;
}

SVG图标切换

对于SVG图标可以改变填充色：

.btn svg {
  fill: #333;
  transition: fill 0.3s;
}

.btn:hover svg {
  fill: #f00;
}

过渡动画效果

添加平滑的过渡效果：

.btn {
  transition: background-image 0.3s ease;
}

这些方法可以根据具体需求选择使用，注意保持原始图片和悬停图片尺寸一致以避免布局偏移。对于更复杂的效果可以结合CSS动画或JavaScript实现。