CSS Pagination

Learn to create beautiful, accessible pagination controls with CSS for navigating through content pages.

Pagination helps users navigate through multi-page content. CSS provides tools for creating attractive pagination controls.

Basic Pagination

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

.pagination a {
  padding: 10px 15px;
  text-decoration: none;
  color: #007bff;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: all 0.3s ease;
}

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

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

Rounded Pagination

.pagination-rounded a {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

With Icons

.pagination .prev::before {
  content: '←';
  margin-right: 5px;
}

.pagination .next::after {
  content: '→';
  margin-left: 5px;
}

Centered Pagination

.pagination-container {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

Best Practices

Pagination Best Practices

Highlight current page
Make buttons large enough to tap
Show prev/next buttons
Indicate disabled state
Use semantic HTML
Ensure keyboard navigation
Consider infinite scroll alternatives

Master pagination to create intuitive multi-page navigation!

Pagination helps users navigate through multi-page content. CSS provides tools for creating attractive pagination controls.

Basic Pagination

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

.pagination a {
  padding: 10px 15px;
  text-decoration: none;
  color: #007bff;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: all 0.3s ease;
}

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

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

Rounded Pagination

.pagination-rounded a {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

With Icons

.pagination .prev::before {
  content: '←';
  margin-right: 5px;
}

.pagination .next::after {
  content: '→';
  margin-left: 5px;
}

Centered Pagination

.pagination-container {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

Best Practices

Pagination Best Practices

Highlight current page
Make buttons large enough to tap
Show prev/next buttons
Indicate disabled state
Use semantic HTML
Ensure keyboard navigation
Consider infinite scroll alternatives

Master pagination to create intuitive multi-page navigation!

CoderrShyam

CSS Pagination

With Icons

Best Practices

On this page

CoderrShyam

CSS Pagination

With Icons

Best Practices

On this page