Suur märkus siin! Liuguksed on üsna vana tehnika. Sellel oli oma aeg veebis, kuid ilmselt pole see tänapäeval kõige targem viis. Meil on nüüd piiriraadius ja gradiendi taust ning kõik see, mis avab suurema osa sellest, mida püüdsime lükanduste päeval tagasi saavutada.
Kuid selle toimimist on ikka tore dokumenteerida, nii et siin see on:
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; )Mis eeldab sellist graafikat:
Vaadake CodePenilt Chris Coyieri (@chriscoyier) pliiatsi libisevate uste nuppe.