Stor note her! Skydedøre er en ret gammel teknik. Det havde sin tid på nettet, men det er sandsynligvis ikke den smarteste vej at gå i disse dage. Vi har grænseradius nu og gradientbaggrund og alt det der frigør det meste af det, vi forsøgte at opnå tilbage på dagen for skydedøre.
Men det er stadig sjovt at dokumentere, hvordan det fungerer, så her er 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; )Hvilket antager grafik som disse:
Se pennens skydedøre-knapper af Chris Coyier (@chriscoyier) på CodePen.