Lưu ý lớn ở đây! Cửa trượt là một kỹ thuật khá cũ. Nó đã có thời gian trên web, nhưng nó có lẽ không phải là cách thông minh nhất để đi vào những ngày này. Hiện tại, chúng tôi có bán kính đường viền và hình nền gradient và tất cả những thứ đó, mở khóa hầu hết những gì chúng tôi đang cố gắng đạt được vào ngày cửa trượt.
Nhưng vẫn rất vui khi ghi lại cách nó hoạt động, vì vậy đây là:
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; )Giả sử đồ họa như sau:
Xem Các nút cửa trượt bằng bút của Chris Coyier (@chriscoyier) trên CodePen.