Perfekter CSS Sprite / Sliding Doors Button

Wichtiger Hinweis! Sliding Doors ist eine ziemlich alte Technik. Sie hatte ihre Zeit im Web, aber heutzutage ist sie wahrscheinlich nicht mehr die klügste Wahl. Wir haben jetzt border-radius und Farbverläufe und all das, was die meisten Dinge ermöglicht, die wir damals mit Sliding Doors erreichen wollten.

Aber es macht immer noch Spaß zu dokumentieren, wie es funktioniert, also hier ist es

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

Was Grafiken wie diese voraussetzt

Siehe den Pen Sliding Doors Buttons von Chris Coyier (@chriscoyier) auf CodePen.