Тут велика нота! Розсувні двері - це досить стара техніка. Це було в Інтернеті, але це, мабуть, не найрозумніший спосіб піти в наші дні. Зараз у нас є радіус кордону, градієнтний фон і все таке, що відкриває більшість того, чого ми намагалися досягти ще в день розсувних дверей.
Але все одно цікаво задокументувати, як це працює, от і ось:
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; )Що передбачає такі графічні зображення:
Дивіться кнопки розсувних дверей ручки Кріса Койєра (@chriscoyier) на CodePen.
