28 CSS pagination examples to get inspired

Website pagination is a way of structuring content and is a widely used resource to limit the amount of information displayed on the screen.

On this page, we list 28 beautiful examples of CSS pagination design to inspire you and get some interesting ideas for your next web design.

Animated pagination

A pagination with a nicely hover effect on the numbers and arrows, with a disabled state for the arrows when the end is reached.

Made with:

Dependencies:

Javascript pagination

Textured pagination configurable through javascript.

Made with:

Dependencies:

Pacman pagination

Pagination with a Pacman transition animation when a new page is selected.

Made with:

Dependencies:

Yeti Hand Pagination

Although the animation does not work well on smaller screens, I added this page for the creativity of the animation by using a yeti hand to move the highlighted number.

Made with:

Dependencies:

Pagination Buttons

Pagination without a number indicator that has a zoomed-in animation to highlight the selected page.

Made with:

Dependencies:

Flexing pagination arrows

This number-based pagination has a nice hover state and a cool disabled state on the arrows.

Made with:

Dependencies:

12 Pagination Ideas

A demo at Codepen with 12 simple and clean pagination ideas for inspiration.

Made with:

Dependencies:

Pure CSS3 Responsive Pagination

A pagination demo in pure CSS in 6 variants with different sizes to fit different screen widths.

Made with:

Dependencies:

Infinite Pagination

Infinite pagination with different visually appealing transitions depending on the directional arrow pressed.

Made with:

Dependencies:

SVG Page Hopper

This pagination is clean and with a smooth jump transition when changing pages.

Made with:

Dependencies:

Spring pagination

Unnumbered pagination that has a fluid spring transition.

Made with:

Dependencies:

6 Pagination examples

6 different styles of pagination, really simple styles, and only with CSS and HTML.

Made with:

Dependencies:

Pagination with morphing numbers

This one has page numbers, and the numbers make a beautiful transition when you change between pages.

Made with:

Dependencies:

Responsive Pagination

Responsive pagination that shrinks on smaller screens, has 3 different configurations.

Made with:

Dependencies:

Responsive Pagination without Javascript

This one is also responsive but without any Javascript.

Made with:

Dependencies:

Clean Pagination

Pagination with a nice and clean style, simple but well designed.

Made with:

Dependencies:

Line Pagination with Hover (PureCSS)

This one has a soft hover effect that underlines the numbers each time you hover over one of them.

Made with:

Dependencies:

Pure CSS pagination

This pure CSS code snippet truncates the pagination depending on the page you are on, really useful if you want to limit the width of pages displayed on a smaller screen.

Made with:

Dependencies:

Beautiful CSS pagination

This code fragment displays a beautiful minimalistic navigation pagination with a green theme and a subtle hover effect.

Made with:

Dependencies:

Responsive navigation/pagination

Are you trying to find pagination that fits smaller screens? This may be your choice, a nice navigation specially built for mobile devices.

Made with:

Dependencies:

Jumping pagination

In this CodePen we find a colorful dot navigation with an eye-catching jump effect when changing the activated dot.

Made with:

Dependencies:

Dot animated page indicator

A simple dark-themed dot pagination but with a beautiful transition every time the activated dot changes.

Made with:

Dependencies:

Pagination hover animation

A code snippet of a pagination that displays the interaction elements on hover and with an underline effect on the numbers.

Made with:

Dependencies:

Dark theme pagination

A simple, elegant and nicely designed dark-themed pagination, with a subtle hover effect and only using CSS/SCSS.

Made with:

Dependencies:

Neumorphism pagination design

If the style of your website is neumorphism, this pagination with an active state on click will suit your needs.

Made with:

Dependencies:

Pagination with pure CSS

A CodePen of a minimalistic pagination design, all achieved without using JavaScript.

Made with:

Dependencies:

Bouncy pagination

Code fragment for a colorful and elegant pagination, featuring a playful bounce animation when changing pages.

Made with:

Dependencies:

Vertical CSS card pagination

CodePen demonstrating a vertical pagination design with a pink theme and a visually appealing dot indicator animation.

Made with:

Dependencies: