Nota besar di sini! Pintu gelangsar adalah teknik yang cukup lama. Sudah tiba masanya di web, tetapi mungkin ini bukan cara paling pintar untuk pergi hari ini. Kami mempunyai radius sempadan sekarang dan latar belakang kecerunan dan semua itu, yang membuka sebahagian besar dari apa yang ingin kita capai pada hari pintu gelangsar.
Tetapi masih menyenangkan untuk mendokumentasikan cara kerjanya, jadi berikut:
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 menganggap grafik seperti ini:
Lihat Butang Pintu Gelongsor Pen oleh Chris Coyier (@chriscoyier) di CodePen.