Pagination

Pagination

Page through a list of results (search pages, blog posts) with clickable page buttons.

The base structure

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">»</a>
</div>

Simple styling

.pagination {
  display: inline-flex;
  gap: 4px;
}
.pagination a {
  color: #000;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 4px;
}
.pagination a.active {
  background-color: #04aa6d;
  color: white;
}
.pagination a:hover:not(.active) {
  background-color: #ddd;
}

Bordered style

.pagination a {
  border: 1px solid #ddd;
}

Hover & disabled styles

.pagination a.disabled {
  color: gray;
  pointer-events: none;
}

TL;DR

• Pagination = display: flex + gap of <a> buttons.
• Highlight the current page with an .active class.
• :hover feedback is essential.
• Add pointer-events: none on disabled links.
• Works great inside a responsive grid or flex layout.