Grande note ici! Les portes coulissantes sont une technique assez ancienne. Il a eu son temps sur le Web, mais ce n'est probablement pas la façon la plus intelligente de procéder de nos jours. Nous avons maintenant un rayon de bordure et des arrière-plans dégradés et tout cela, qui débloquent la plupart de ce que nous essayions de réaliser à l'époque des portes coulissantes.
Mais il est toujours amusant de documenter son fonctionnement, alors le voici:
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; )Ce qui suppose des graphiques comme ceux-ci:
Voir les boutons Pen Sliding Doors de Chris Coyier (@chriscoyier) sur CodePen.