CSS Pagination

Pagination

Pagination is a set of links used to navigate between pages of content (for example: 1 2 3 Next). With CSS, you can create clean pagination UI with hover states, active states, and rounded styles.

Basic HTML structure:

<nav class="pagination">
  <a href="#" class="disabled">&laquo;</a>
  <a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</nav>

Basic CSS:

.pagination {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.pagination a {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(0,0,0,.14);
  border-radius: 10px;
  text-decoration: none;
  color: #111;
  background: #fff;
}

Active and Disabled States

Pagination usually highlights the current page and disables navigation that cannot be used (like “previous” on page 1).

.pagination a.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 700;
}

.pagination a.disabled {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}

Tip: Using pointer-events: none prevents clicks on disabled links.

Hover Effects

Hover effects help users understand the links are interactive. Keep them subtle and consistent.

.pagination a {
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}

.pagination a:hover {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.45);
  transform: translateY(-1px);
}

You can also add a focus style for keyboard navigation:

.pagination a:focus-visible {
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}

Rounded Pagination

For a “pill” style pagination, increase the border radius.

.pagination.rounded a {
  border-radius: 999px;
}

Optional: grouped pagination (connected buttons):

.pagination.group {
  gap: 0;
}

.pagination.group a {
  border-radius: 0;
}

.pagination.group a + a {
  margin-left: -1px; /* prevent double border */
}

.pagination.group a:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.pagination.group a:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

Summary

• Pagination is styled using flex layout and consistent link sizing.
• Use .active to highlight the current page.
• Use .disabled with pointer-events: none for non-clickable links.
• Add hover and focus-visible states for better UX and accessibility.