Didelė pastaba čia! Stumdomos durys yra gana sena technika. Savo laiko jis turėjo žiniatinklyje, tačiau tikriausiai tai nėra pats protingiausias būdas šiais laikais. Dabar mes turime sienos spindulį, gradientą ir visa tai, kas atveria didžiąją dalį to, ką bandėme pasiekti dar stumdomų durų dieną.
Bet vis tiek smagu dokumentuoti, kaip tai veikia, taigi štai:
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; )Kuris prisiima tokią grafiką:
Žr. Chriso Coyierio (@chriscoyier) „Pen“ stumdomų durų mygtukus „CodePen“.