完美的 CSS 雪碧图 / 推拉门按钮

这里需要特别注意！推拉门是一种相当古老的技术。它曾在网络上风靡一时，但如今可能不是最明智的选择。我们现在有了 border-radius 和渐变背景等等，这些都能实现我们当年使用推拉门想要达到的效果。

但记录其工作原理仍然很有趣，所以这里就有了

<a href="#" class="button">
  <span>Sliding Doors Button</span>
</a>

.button {
  float: left;
  clear: both;
  background: url(RIGHT_SIDE.png) top right no-repeat;
  margin: 5px;
  padding-right: 20px;
  color: white;
  text-decoration: none;
}
.button span {
  background: url(LEFT_SIDE.png) top left no-repeat;
  line-height: 22px;
  padding: 7px 0 5px 18px;
  display: block;
}
.button:hover {
  background-position: right -34px;
}
.button:hover span {
  background-position: 0 -34px; color: #fff;
}

假设有如下图形

查看 CodePen 上 Chris Coyier (@chriscoyier) 的作品 推拉门按钮。