Perfect CSS Sprite / Sliding Doors Button

Big note here! Sliding doors is a pretty old technique. It had its time on the web, but it’s probably not the smartest way to go these days. We have border-radius now and gradient backgrounds and all that, which unlock most of what we were trying to achieve back in the day of sliding doors.

But it’s still fun to document how it works, so here it is:

<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;
}

Which assumes graphics like these:

See the Pen Sliding Doors Buttons by Chris Coyier (@chriscoyier) on CodePen.