Catatan besar di sini! Pintu geser adalah teknik yang cukup lama. Itu sudah waktunya di web, tapi mungkin itu bukan cara paling cerdas untuk pergi hari ini. Kami sekarang memiliki radius-batas dan latar belakang gradien dan semua itu, yang membuka sebagian besar dari apa yang kami coba capai pada zaman pintu geser.
Tapi tetap menyenangkan untuk mendokumentasikan cara kerjanya, jadi ini dia:
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; )Yang mengasumsikan grafik seperti ini:
Lihat Tombol Pintu Geser Pena oleh Chris Coyier (@chriscoyier) di CodePen.