¡Gran nota aquí! Las puertas correderas son una técnica bastante antigua. Tuvo su tiempo en la web, pero probablemente no sea la forma más inteligente de hacerlo en estos días. Ahora tenemos un radio de borde y fondos degradados y todo eso, que desbloquea la mayor parte de lo que estábamos tratando de lograr en la época de las puertas correderas.
Pero sigue siendo divertido documentar cómo funciona, así que aquí está:
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; )Que asume gráficos como estos:
Vea los botones de las puertas corredizas de la pluma de Chris Coyier (@chriscoyier) en CodePen.