39 Stylish CSS Pagination Examples

Page navigation breaks or makes the user experience on content-heavy websites.

These CSS pagination examples give you ready-to-use code snippets for numbered page links, previous/next buttons, hover effects, and responsive designs that work across all screen sizes.

You’ll find simple implementations alongside advanced techniques using flexbox, grid layout, and CSS custom properties for theming.

Each example includes complete code you can copy directly into your projects. No frameworks required.

Whether you’re building blog archives, search results, or product listings, these pagination patterns will save you hours of styling from scratch.

What is CSS Pagination

CSS pagination is a styling technique for page navigation elements that split content across multiple pages.

It creates clickable page numbers, previous/next buttons, and navigation dots users interact with to browse content.

You see pagination on search results, blog archives, product listings, and any interface where content exceeds a single page.

The HTML structure typically uses unordered lists with anchor tags inside list items.

CSS handles all visual aspects: colors, spacing, borders, hover states, and active page indicators.

Pagination differs from infinite scroll or “load more” patterns. It gives users direct control over which page to view and clear position awareness within content.

Good pagination improves usability by reducing cognitive load. Users know exactly where they are and how much content remains.

CSS Pagination Examples To Check Out

Roundie Magic by ahmed beheiry

See the Pen
Roundie Pagination by ahmed beheiry (@ahmedbeheiry)
on CodePen.

Follow The Line by Mark Mead

See the Pen
CSS Line Follow Pagination by Mark Mead (@markmead)
on CodePen.

Customize Me! by Simon Goellner

See the Pen
Pagination by Simon Goellner (@simeydotme)
on CodePen.

Dance of the Numbers

See the Pen
Pagination with morphing numbers by Mikael Ainalem (@ainalem)
on CodePen.

Modern Vibes by Milica

See the Pen
responsive pagination by Milica (@micadev)
on CodePen.

Step Up The Game by Brandon Capp

See the Pen
Animated Pagination Dots by Brandon Capp (@brandoncapp)
on CodePen.

Pure Essence by Muhammad Rauf

See the Pen
Pagination using HTML and CSS by Muhammad Rauf (@softcodeon)
on CodePen.

Jump n’ Bounce!

See the Pen
Bouncy Pagination by Adam Kuhn (@cobra_winfrey)
on CodePen.

Chomp-Chomp by Paraskevas Dinakis

See the Pen
Pac-Man CSS Pagination by Paraskevas Dinakis (@perry_nt)
on CodePen.

Simplicity Wins by Aashima Jain

See the Pen
Clip-path Pagination by Aashima Jain (@Aashima)
on CodePen.

Elegance in Motion

See the Pen
Beautifully animated Pagination style in Pure css by Aashima Jain (@Aashima)
on CodePen.

Space-Saver by Elena Nazarova

See the Pen
pagination hover animation by Elena Nazarova (@nazarelen)
on CodePen.

Splash of Color by Mamun Khandaker

See the Pen
Creative stylish pagination design by Mamun Khandaker (@kh-mamun)
on CodePen.

Glide & Shine

See the Pen
CSS Pagination with Hover Effect by freefrontend.com (@cssparadise)
on CodePen.

Touch Friendly by Sibusiso Mtombeni

See the Pen
Pagination Buttons by Sibusiso Mtombeni (@sibusiso-mtombeni)
on CodePen.

Six Flavors by Béla Varga

See the Pen
Pure CSS3 Responsive Pagination by Béla Varga (@netzzwerg)
on CodePen.

Jump the Dots with Elliot Geno

See the Pen
Dot Hopper – Pagination by Elliot Geno (@pyrografix)
on CodePen.

Wichert’s Wonderland

See the Pen
#dailyui 085 Pagination by Andre Wichert (@andrewichert)
on CodePen.

Keep Scrolling by ElmiraMukhamedjanova

See the Pen
Pagination, pager by Elmira Mukhamedjanova (@ElmiraMukhamedjanova)
on CodePen.

Classic Vibes by Joe

See the Pen
Tooltip Pagination by Joe (@dope)
on CodePen.

Compact Control by Wayne Dunkley

See the Pen
Dynamic Page Controls by Wayne Dunkley (@waynedunkley)
on CodePen.

Smooth Stone by Claudio Rigollet

See the Pen
CSS3 – Neumorphism Pagination Design by Claudio Rigollet (@claudiorigo)
on CodePen.

Bles’s Brainchild

See the Pen
WebDesignerDepot pagination by Wouter Bles (@wouterbles)
on CodePen.

Stephanie’s Stellar Table

See the Pen
Materialize + Angular Search and Filter Responsive Table with pagination by Stephanie (@StuffieStephie)
on CodePen.

Space-Saver by Mariusz Dabrowski

See the Pen
Infinite Pagination by Mariusz Dabrowski (@MarioD)
on CodePen.

Center Stage by Vamsikrishna Kodimela

See the Pen
Simple CSS Pagination by Vamsikrishna Kodimela (@vamsikrishna-kodimela)
on CodePen.

Keep It Simple with Gerardo Valencia

See the Pen
Simple pagination CSS by Gerardo Valencia (@grardovr)
on CodePen.

Magic Guideline by Ryan Yu

See the Pen
Responsive Magic Line Pagination by Ryan Yu (@iamryanyu)
on CodePen.

Indicators Powerhouse by Thykka

See the Pen
pagination indicators by thykka (@thykka)
on CodePen.

Munchy Moves with Mikael Ainalem

See the Pen
Pacman pagination by Mikael Ainalem (@ainalem)
on CodePen.

Pedro Rago’s Slick Line

See the Pen
Line Pagination Navbar by Pedro Rago (@PedroRago10)
on CodePen.

Steven’s Materialistic Flair

See the Pen
Pagination One by Steven Roberts (@matchboxhero)
on CodePen.

Michael’s Classic Roman Spin

See the Pen
Roman Pagination by Michael Sveistrup (@faffelkugel)
on CodePen.

Pure Genius by Brendan Mullins

See the Pen
Pure CSS pagination by Brendan Mullins (@jsnanigans)
on CodePen.

Himalaya’s Handy Navigation

See the Pen
Pagination or Navigation Links Application by Himalaya Singh (@himalayasingh)
on CodePen.

Kasper’s Geometric Groove

See the Pen
Pagination by Kasper Mikiewicz (@Idered)
on CodePen.

Hakim’s Arrow Acrobatics

See the Pen
Flexing pagination arrows by Hakim El Hattab (@hakimel)
on CodePen.

Darin’s Yeti Wave

See the Pen
Yeti Hand Pagination by Darin (@dsenneff)
on CodePen.

Rohenha’s Animation Alchemy

See the Pen
Pagination animation experiment by Rohenha (@rohenha)
on CodePen.

How Does CSS Pagination Work

CSS pagination targets specific HTML elements and applies visual styling through selectors, properties, and values.

The base structure starts with a container element (usually a nav or div) wrapping an unordered list of page links.

Basic HTML Structure

<nav class="pagination">
<ul>
<li><a href="#">Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>

Core CSS Properties

Remove default list styling with list-style: none and reset padding/margin.

Display items inline using flexbox or display: inline-block.

Style anchor tags with padding, background colors, and border properties.

.pagination ul {
list-style: none;
display: flex;
gap: 8px;
padding: 0;
margin: 0;
}

.pagination a {
display: block;
padding: 10px 16px;
text-decoration: none;
background-color: #f1f1f1;
color: #333;
border-radius: 4px;
transition: background-color 0.3s ease;
}

.pagination a:hover {
background-color: #ddd;
}

.pagination a.active {
background-color: #007bff;
color: white;
}

The transition property creates smooth hover effects between states.

The .active class highlights the current page with contrasting colors.

What Are the Types of CSS Pagination Styles

CSS pagination comes in several distinct patterns, each suited to different user interface needs.

Common Pagination Types

• Simple numbered pagination – sequential page numbers in a row
• Previous/next buttons – directional navigation without page numbers
• Breadcrumb style – path-based navigation showing position
• Dots pagination – minimal indicators for image galleries or sliders
• Load more buttons – single button that appends content
• Infinite scroll indicators – visual feedback during auto-loading

Numbered pagination works best for content where users need to jump to specific pages.

Dots work well for carousels and slideshows with limited slides.

Previous/next buttons suit sequential reading like articles or tutorials.

Simple Numbered Pagination CSS Example

Numbered pagination displays clickable page numbers in sequence with an active state for the current page.

HTML Markup

<nav class="simple-pagination">
<ul>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</nav>

CSS Styling

.simple-pagination ul {
list-style: none;
display: flex;
justify-content: center;
gap: 6px;
padding: 0;
}

.simple-pagination a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
text-decoration: none;
background: #e9ecef;
color: #495057;
font-weight: 500;
border-radius: 4px;
}

.simple-pagination a:hover {
background: #dee2e6;
}

.simple-pagination a.active {
background: #0d6efd;
color: #fff;
pointer-events: none;
}

The pointer-events: none prevents clicking the already-active page.

Fixed width and height with flexbox centering keeps numbers perfectly aligned regardless of digit count.

This pattern scales from single digits to hundreds of pages without layout shifts.

CSS Pagination with Previous and Next Buttons

Adding directional buttons lets users navigate sequentially without scanning page numbers.

HTML Structure

<nav class="prev-next-pagination">
<a href="#" class="prev">&laquo; Previous</a>
<span class="page-info">Page 3 of 10</span>
<a href="#" class="next">Next &raquo;</a>
</nav>

CSS Code

.prev-next-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}

.prev-next-pagination a {
padding: 12px 24px;
text-decoration: none;
background: #343a40;
color: #fff;
border-radius: 6px;
font-weight: 500;
transition: background 0.2s, transform 0.2s;
}

.prev-next-pagination a:hover {
background: #495057;
transform: translateY(-2px);
}

.prev-next-pagination a.disabled {
background: #6c757d;
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}

.page-info {
color: #6c757d;
font-size: 14px;
}

The transform: translateY(-2px) adds a subtle lift effect on hover.

HTML entities « and » create the arrow symbols (« and »).

For web accessibility, add ARIA labels: aria-label="Go to previous page".

The disabled state uses both opacity and pointer-events: none for clear visual and functional feedback when on first or last page.

Rounded CSS Pagination Design

Rounded pagination uses border-radius to soften edges, creating a friendlier visual appearance.

Circular page numbers work well for modern interfaces and minimalist design systems.

CSS Code

.rounded-pagination ul {
list-style: none;
display: flex;
gap: 8px;
padding: 0;
}

.rounded-pagination a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
text-decoration: none;
background: #f8f9fa;
color: #212529;
border-radius: 50%;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rounded-pagination a:hover {
background: #e9ecef;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.rounded-pagination a.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
}

The 44px dimension meets touch target guidelines for mobile-first design.

Gradient backgrounds on the active state add depth without extra elements.

CSS Pagination with Hover Effects

Hover states provide visual feedback confirming interactive elements.

The transition property smooths property changes over specified durations.

Scale Transform Effect

.hover-pagination a {
padding: 10px 18px;
background: #1a1a2e;
color: #eee;
border-radius: 4px;
transition: transform 0.2s ease, background 0.2s ease;
}

.hover-pagination a:hover {
transform: scale(1.1);
background: #16213e;
}

Background Slide Effect

.slide-pagination a {
position: relative;
padding: 10px 18px;
color: #333;
overflow: hidden;
z-index: 1;
}

.slide-pagination a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: #4361ee;
transition: left 0.3s ease;
z-index: -1;
}

.slide-pagination a:hover::before {
left: 0;
}

.slide-pagination a:hover {
color: #fff;
}

Pseudo-elements create complex animations without extra markup.

The overflow: hidden clips the sliding background within button boundaries.

Responsive CSS Pagination for Mobile

Media queries adapt pagination layout based on viewport width.

Mobile screens often can’t fit full page number sequences.

Responsive Strategy

.responsive-pagination ul {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}

.responsive-pagination .page-number {
display: flex;
}

@media (max-width: 576px) {
.responsive-pagination .page-number {
display: none;
}

.responsive-pagination .page-number.active,
.responsive-pagination .prev,
.responsive-pagination .next {
display: flex;
}

.responsive-pagination a {
padding: 12px 20px;
font-size: 16px;
}
}

Hide middle page numbers on small screens, show only prev/next and current page.

Larger touch targets (minimum 44x44px) prevent mis-taps on mobile devices.

The flex-wrap: wrap property handles overflow gracefully when numbers exceed container width.

CSS Pagination with Flexbox

Flexbox simplifies pagination alignment and spacing with minimal code.

Centered Flexbox Layout

.flex-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}

.flex-pagination a {
padding: 8px 14px;
background: #f0f0f0;
color: #333;
text-decoration: none;
border-radius: 4px;
}

.flex-pagination a.active {
background: #2563eb;
color: #fff;
}

Space-Between Layout

.flex-spread {
display: flex;
justify-content: space-between;
max-width: 400px;
margin: 0 auto;
}

.flex-spread .prev { margin-right: auto; }
.flex-spread .next { margin-left: auto; }
.flex-spread .pages { display: flex; gap: 6px; }

The gap property eliminates margin calculations between items.

Use justify-content: center for centered pagination, space-between for edge-aligned buttons.

CSS Pagination Using Grid Layout

CSS Grid offers precise control over pagination element placement.

Grid Implementation

.grid-pagination {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
max-width: 500px;
margin: 0 auto;
}

.grid-pagination .prev { justify-self: start; }
.grid-pagination .pages {
justify-self: center;
display: flex;
gap: 6px;
}
.grid-pagination .next { justify-self: end; }

.grid-pagination a {
padding: 10px 16px;
background: #e2e8f0;
color: #1e293b;
text-decoration: none;
border-radius: 6px;
}

Three-column grid places prev button left, page numbers center, next button right.

The 1fr unit gives the middle column flexible width for varying page counts.

Bordered CSS Pagination Style

Border styles create clear visual separation between page links.

Connected Border Design

.bordered-pagination ul {
display: flex;
list-style: none;
padding: 0;
border: 1px solid #dee2e6;
border-radius: 6px;
overflow: hidden;
}

.bordered-pagination li:not(:last-child) {
border-right: 1px solid #dee2e6;
}

.bordered-pagination a {
display: block;
padding: 10px 16px;
color: #0d6efd;
text-decoration: none;
background: #fff;
}

.bordered-pagination a:hover {
background: #e9ecef;
}

.bordered-pagination a.active {
background: #0d6efd;
color: #fff;
}

The :not(:last-child) selector applies borders between items without doubling at edges.

Container overflow: hidden clips child backgrounds to respect parent border-radius.

Dark Mode CSS Pagination

Dark themes reduce eye strain and save battery on OLED screens.

CSS Custom Properties for Theming

:root {
--pg-bg: #f8f9fa;
--pg-text: #212529;
--pg-active: #0d6efd;
--pg-hover: #e9ecef;
}

@media (prefers-color-scheme: dark) {
:root {
--pg-bg: #2d3748;
--pg-text: #e2e8f0;
--pg-active: #4299e1;
--pg-hover: #4a5568;
}
}

.dark-pagination a {
padding: 10px 16px;
background: var(--pg-bg);
color: var(--pg-text);
border-radius: 4px;
}

.dark-pagination a:hover {
background: var(--pg-hover);
}

.dark-pagination a.active {
background: var(--pg-active);
color: #fff;
}

The prefers-color-scheme media query detects system theme preferences automatically.

CSS custom properties (variables) enable theme switching with minimal code duplication.

Maintain sufficient color contrast ratios (4.5:1 minimum) in both light and dark modes.

Animated CSS Pagination Transitions

CSS keyframes create complex animations beyond simple transitions.

Pulse Animation on Active

@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

.animated-pagination a.active {
background: #10b981;
color: #fff;
animation: pulse 2s infinite;
}

.animated-pagination a {
padding: 10px 16px;
background: #d1fae5;
color: #065f46;
border-radius: 6px;
transition: all 0.3s ease;
}

Entrance Animation

@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.entrance-pagination li {
animation: fadeSlideIn 0.4s ease forwards;
opacity: 0;
}

.entrance-pagination li:nth-child(1) { animation-delay: 0.1s; }
.entrance-pagination li:nth-child(2) { animation-delay: 0.15s; }
.entrance-pagination li:nth-child(3) { animation-delay: 0.2s; }
.entrance-pagination li:nth-child(4) { animation-delay: 0.25s; }
.entrance-pagination li:nth-child(5) { animation-delay: 0.3s; }

Staggered delays create a wave effect as page numbers appear sequentially.

Keep animations subtle. Excessive motion distracts users and causes accessibility issues.

CSS Pagination with Icons

Icons improve recognition speed for navigation controls.

Using SVG Icons

.icon-pagination a {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: #f1f5f9;
color: #334155;
border-radius: 6px;
text-decoration: none;
}

.icon-pagination svg {
width: 16px;
height: 16px;
fill: currentColor;
}

.icon-pagination .prev svg { transform: rotate(180deg); }

.icon-pagination a:hover {
background: #e2e8f0;
}

Inline SVG icons inherit text color through fill: currentColor.

The gap property in flexbox spaces icon and text evenly.

You can also use icon fonts like Bootstrap Icons or Font Awesome with pseudo-elements.

Breadcrumb Style CSS Pagination

Breadcrumb pagination shows position within a sequence using separators.

Breadcrumb Implementation

.breadcrumb-pagination ul {
display: flex;
align-items: center;
list-style: none;
padding: 0;
gap: 0;
}

.breadcrumb-pagination li:not(:last-child)::after {
content: '/';
margin: 0 12px;
color: #9ca3af;
}

.breadcrumb-pagination a {
color: #6b7280;
text-decoration: none;
padding: 4px 0;
}

.breadcrumb-pagination a:hover {
color: #111827;
text-decoration: underline;
}

.breadcrumb-pagination a.active {
color: #111827;
font-weight: 600;
}

Pseudo-element ::after adds separators without extra HTML markup.

Works best for linear content sequences: tutorials, multi-step forms, checkout flows.

How to Center CSS Pagination

Multiple CSS methods achieve horizontal centering.

Centering Methods

/* Flexbox method */
.center-flex {
display: flex;
justify-content: center;
}

/* Text-align method (for inline elements) */
.center-text {
text-align: center;
}
.center-text ul {
display: inline-flex;
gap: 8px;
}

/* Margin auto method */
.center-margin ul {
display: flex;
width: fit-content;
margin: 0 auto;
}

Flexbox with justify-content: center is the most reliable approach.

The width: fit-content with margin: auto works when flexbox isn’t an option.

How to Style the Active Page in CSS Pagination

The active state shows users their current position.

Active State Techniques

.pagination a.active {
background: #2563eb;
color: #fff;
font-weight: 600;
pointer-events: none;
cursor: default;
}

/* Underline indicator */
.underline-pagination a.active {
color: #2563eb;
border-bottom: 3px solid #2563eb;
background: transparent;
}

/* Badge style */
.badge-pagination a.active {
background: #dc2626;
color: #fff;
border-radius: 50%;
transform: scale(1.1);
}

Disable pointer events on active page to prevent redundant clicks.

High contrast between active and inactive states improves scannability.

How to Add Disabled States to CSS Pagination

Disabled states indicate unavailable actions (first page has no “previous”).

Disabled Styling

.pagination a.disabled,
.pagination a[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
background: #e5e7eb;
color: #9ca3af;
}

/* Visually hidden but accessible */
.pagination a.disabled:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

Use both visual styling and pointer-events: none for complete disabling.

The aria-disabled="true" attribute communicates state to screen readers.

Keep focus styles visible for keyboard navigation accessibility.

CSS Pagination Best Practices

Follow these guidelines for functional, accessible pagination.

Spacing and Touch Targets

• Minimum 44x44px touch targets for mobile
• 8-12px gap between page items
• Consistent padding inside buttons (10-16px)

Accessibility Requirements

• 4.5:1 minimum color contrast ratio
• Visible focus indicators for keyboard users
• ARIA labels: aria-label="Page 3", aria-current="page"
• Semantic HTML: nav element with aria-label="Pagination"

Performance Considerations

• Use CSS transitions over JavaScript animations
• Avoid layout shifts when states change
• Test across browsers for cross-browser compatibility

Keep pagination visible and predictable. Users expect page numbers to behave consistently across sites.

FAQ on CSS Pagination Examples

What is CSS pagination?

CSS pagination is the styling of page navigation elements that let users move between content sections. It includes numbered page links, previous/next buttons, and active page indicators styled entirely with CSS properties like flexbox, borders, and transitions.

How do I create simple pagination with CSS?

Build an unordered list with anchor tags for each page number. Apply display: flex to the list, remove default styling with list-style: none, add padding and background colors to links, then style the .active class for the current page.

How do I center pagination in CSS?

Use flexbox with justify-content: center on the pagination container. Alternatively, set width: fit-content and margin: 0 auto on the list element. Both methods work reliably across modern browsers.

How do I make CSS pagination responsive?

Apply responsive design using media queries to hide page numbers on small screens while keeping prev/next buttons visible. Set minimum touch targets of 44px and use flex-wrap: wrap to handle overflow gracefully.

How do I style the active page in pagination?

Target the active link with a class selector like .pagination a.active. Apply contrasting background color, different text color, and pointer-events: none to prevent clicking. Add font-weight: 600 for extra emphasis.

How do I add hover effects to pagination?

Use the :hover pseudo-class with transition property for smooth state changes. Common effects include background color shifts, transform: scale(1.1), box shadow additions, and button hover effects using pseudo-elements.

Can I create pagination without JavaScript?

Yes, CSS handles all visual styling: colors, spacing, hover states, animations, and responsive behavior. JavaScript is only needed for functional page switching, loading content, or connecting to API endpoints.

How do I add icons to pagination buttons?

Insert inline SVG elements inside anchor tags or use icon fonts with pseudo-elements. Apply fill: currentColor to SVGs so they inherit text color. Use flexbox with gap property to space icons and text evenly.

What is the best pagination style for mobile?

Simplified prev/next buttons with current page indicator work best on mobile. Hide full number sequences to save space. Ensure 44x44px minimum touch targets and adequate spacing between interactive elements to prevent mis-taps.

How do I create dark mode pagination?

Use CSS custom properties (variables) for colors and swap values with @media (prefers-color-scheme: dark). This automatically matches system preferences. Maintain 4.5:1 contrast ratios in both themes for accessibility compliance.

Conclusion

These CSS pagination examples cover everything from basic numbered layouts to advanced animated designs with dark mode support.

Pick the pattern that fits your project. Copy the code. Customize colors and spacing to match your design system.

Flexbox and grid systems handle alignment with minimal effort.

CSS transitions and micro-interactions add polish without JavaScript overhead.

Remember the fundamentals: adequate touch targets for mobile users, visible focus states for keyboard navigation, and sufficient contrast ratios between active and inactive states.

Test your pagination across different screen sizes and font scales to catch layout issues early.

Start with a simple design. Add complexity only when your interface demands it.

Clean, functional pagination improves how users move through your content.