Chào các bạn!
Pagination không còn là điều gì xa lạ với các bạn nữa. Bất cứ 1 website nào cũng có sự hiện diện pagination. Tuy nhiên, xét về thực tế mình thấy style của pagination đang sử dụng khá đơn giản: tròn hoặc vuông hoặc không có background, border luôn.
Các bạn có bao giờ suy nghĩ việc thay đổi style cho pagination sinh động và đẹp mắt hơn chưa?
Vì vậy, bài này mình sẽ giới thiệu tới một số style khá đẹp mắt về pagination cho các bạn tham khảo nhé!
Thông thường khi viết code để tạo pagination, chúng ta thường sử dụng kiểu cấu trúc ul li
|
1 2 3 4 5 6 7 |
<ul class="paginations"> <li class="active"><span>1</span></li> <li class=""><a href="#">2</a></li> <li class=""><a href="#">3</a></li> <li class=""><a href="#">4</a></li> </ul> |
Thực tế ở các demo mà mình giới thiệu hôm nay cũng không có khác biệt nhiều. Tuy nhiên, có vài demo sẽ có sử dụng svg. Và sử dụng như nào thì chúng ta cùng đi coi từng demo nhé.
1. Yeti Hand Pagination
Với hiệu ứng sử dụng bàn tay để active khá là mới mẻ và thú vị.