Grote opmerking hier! Schuifdeuren is een vrij oude techniek. Het had zijn tijd op internet, maar het is tegenwoordig waarschijnlijk niet de slimste manier om te gaan. We hebben nu een grensradius en achtergronden met een verloop en zo, die het meeste ontgrendelen van wat we probeerden te bereiken in de tijd van schuifdeuren.
Maar het is nog steeds leuk om te documenteren hoe het werkt, dus hier is het:
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; )Die veronderstelt afbeeldingen als deze:
Zie de Pen schuifdeuren knoppen door Chris Coyier (@chriscoyier) op CodePen.