Große Notiz hier! Schiebetüren sind eine ziemlich alte Technik. Es hatte seine Zeit im Web, aber es ist heutzutage wahrscheinlich nicht der klügste Weg. Wir haben jetzt einen Randradius und Verlaufshintergründe und all das, was das meiste freischaltet, was wir am Tag der Schiebetüren erreichen wollten.
Aber es macht immer noch Spaß zu dokumentieren, wie es funktioniert. Hier ist es also:
Sliding Doors Button .button ( float: left; clear: both; background: url(RIGHT_SIDE.png.webp) top right no-repeat; margin: 5px; padding-right: 20px; color: white; text-decoration: none; ) .button span ( background: url(LEFT_SIDE.png.webp) 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; )Welches setzt Grafiken wie diese voraus:
Siehe die Stiftschiebetüren von Chris Coyier (@chriscoyier) auf CodePen.