Stor anmärkning här! Skjutdörrar är en ganska gammal teknik. Det hade sin tid på webben, men det är förmodligen inte det smartaste sättet att gå idag. Vi har gränsradie nu och lutningsbakgrunder och allt detta som låser upp det mesta av det vi försökte uppnå på dagen för skjutdörrarna.
Men det är fortfarande kul att dokumentera hur det fungerar, så här är det:
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; )Vilket antar grafik som dessa:
Se pennans skjutdörrknappar av Chris Coyier (@chriscoyier) på CodePen.