CssHow-ToBeginner · 3 min read

How to Create Pagination in CSS: Simple Steps and Example

To create pagination in CSS, use a container with inline or flex layout holding page number buttons styled with border, padding, and hover effects. Use display: flex for horizontal alignment and style active pages differently with classes.

📐

Syntax

Pagination typically uses a container element with page links or buttons inside. CSS styles control layout, spacing, and appearance.

display: flex; aligns page items horizontally.
padding adds clickable space around numbers.
border defines button edges.
cursor: pointer; shows clickable items.
:hover changes style on mouse hover.
.active class highlights the current page.

css

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
}
.pagination li {
  margin: 0 0.25rem;
}
.pagination li a {
  display: block;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.25rem;
}
.pagination li a:hover {
  background-color: #eee;
}
.pagination li a.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

💻

Example

This example shows a simple pagination bar with page numbers styled horizontally. The current page is highlighted with a blue background.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Pagination Example</title>
<style>
  .pagination {
    display: flex;
    list-style: none;
    padding: 0;
    justify-content: center;
    margin-top: 2rem;
  }
  .pagination li {
    margin: 0 0.25rem;
  }
  .pagination li a {
    display: block;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0.25rem;
    user-select: none;
  }
  .pagination li a:hover {
    background-color: #eee;
  }
  .pagination li a.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
  }
</style>
</head>
<body>
<ul class="pagination" aria-label="Pagination Navigation">
  <li><a href="#" aria-label="Previous page">&laquo;</a></li>
  <li><a href="#" class="active" aria-current="page">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" aria-label="Next page">&raquo;</a></li>
</ul>
</body>
</html>

Output

A horizontal row of page numbers 1 to 5 with left and right arrows. The number 1 is highlighted in blue with white text. Hovering over other numbers changes their background to light gray.

⚠️

Common Pitfalls

Common mistakes when creating pagination in CSS include:

Using inline display which can cause uneven spacing and wrapping issues.
Not styling the active page differently, making it hard to see the current page.
Missing cursor: pointer; on clickable items, confusing users.
Not adding enough padding, making buttons hard to click.
Ignoring accessibility by missing aria-label or aria-current attributes.

css

/* Wrong: inline display causes spacing issues */
.pagination {
  display: inline;
}

/* Right: use flex for consistent horizontal layout */
.pagination {
  display: flex;
}

📊

Quick Reference

Tips for CSS pagination:

Use display: flex; on the container for horizontal layout.
Style active page with a distinct background and text color.
Add padding for easy clicking.
Use border-radius for rounded buttons.
Include aria-label and aria-current for accessibility.

✅

Key Takeaways

Use flexbox to align pagination items horizontally and evenly.

Highlight the active page with a distinct style for clarity.

Add padding and cursor styles to improve usability and feedback.

Include accessibility attributes like aria-label and aria-current.

Avoid inline display and insufficient spacing to prevent layout issues.