15 demo CSS tuyệt đẹp cho Pagination

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

<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ị.

2. Pacman pagination

3. Trailing pagination dots

4. Responsive Magic Line Pagination

5. Pagination animation experiment

6. Force Framework pagination style modified CSS

7. Breadcrumb form pagination

8. Pagination or Navigation Links Application

9. Line Pagination with Hover (PureCSS)

10. Infinite Pagination

11. Flexing pagination arrows

12. Line Pagination Navbar

13. Pure CSS3 Responsive Pagination

14. Pagination Buttons

15. Good pagination Codrops

Như vậy, qua bài này, các bạn đã có thể lựa chọn cho mình một số mẫu pagination vừa đẹp vừa đặc biệt rồi phải không?

Chúc các bạn may mắn!

Link tham khảo https://bashooka.com/coding/codepen-demos-for-css-pagination/