How to Create CSS Pagination (7 Styles)

<!-- HTML -->
<nav aria-label="Pagination">
  <ul class="pagination">
    <li><a href="#" aria-label="Previous page">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page" class="active">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>
</nav>

<!-- CSS -->
<style>
.pagination {
  display: flex;
  list-style: none;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  transition: all 0.2s ease;
}

.pagination a:hover {
  color: #3b82f6;
  background-color: #f3f4f6;
}

.pagination a.active {
  color: #3b82f6;
  font-weight: 600;
}
</style>

<!-- HTML -->
<nav aria-label="Pagination">
  <ul class="pagination-rounded">
    <li><a href="#" aria-label="Previous page">&laquo; Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page" class="active">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">Next &raquo;</a></li>
  </ul>
</nav>

<!-- CSS -->
<style>
.pagination-rounded {
  display: flex;
  list-style: none;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.pagination-rounded a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 16px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  background-color: #f3f4f6;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

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

.pagination-rounded a.active {
  color: white;
  background-color: #3b82f6;
}
</style>

<!-- HTML -->
<nav aria-label="Pagination">
  <ul class="pagination-outlined">
    <li><a href="#" class="prev" aria-label="Previous page">&larr; Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page" class="active">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" class="next" aria-label="Next page">Next &rarr;</a></li>
  </ul>
</nav>

<!-- CSS -->
<style>
.pagination-outlined {
  display: flex;
  list-style: none;
  gap: 0;
  padding: 0;
  margin: 0;
}

.pagination-outlined a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  background-color: white;
  border: 1px solid #d1d5db;
  margin-left: -1px;
  transition: all 0.2s ease;
}

.pagination-outlined li:first-child a {
  border-radius: 8px 0 0 8px;
  margin-left: 0;
}

.pagination-outlined li:last-child a {
  border-radius: 0 8px 8px 0;
}

.pagination-outlined a:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  z-index: 1;
}

.pagination-outlined a.active {
  color: #3b82f6;
  background-color: #eff6ff;
  border-color: #3b82f6;
  z-index: 2;
}
</style>

<!-- HTML -->
<nav aria-label="Pagination">
  <ul class="pagination-filled">
    <li><a href="#" aria-label="Previous page">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page" class="active">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>
</nav>

<!-- CSS -->
<style>
.pagination-filled {
  display: flex;
  list-style: none;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.pagination-filled a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  text-decoration: none;
  color: white;
  font-size: 14px;
  font-weight: 500;
  background-color: #4b5563;
  border-radius: 8px;
  transition: all 0.2s ease;
}

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

.pagination-filled a.active {
  background-color: #3b82f6;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}
</style>

<!-- HTML -->
<nav aria-label="Pagination">
  <ul class="pagination-dots">
    <li><a href="#" aria-label="Previous page">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><span class="dots">...</span></li>
    <li><a href="#">4</a></li>
    <li><a href="#" aria-current="page" class="active">5</a></li>
    <li><a href="#">6</a></li>
    <li><span class="dots">...</span></li>
    <li><a href="#">20</a></li>
    <li><a href="#" aria-label="Next page">&raquo;</a></li>
  </ul>
</nav>

<!-- CSS -->
<style>
.pagination-dots {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.pagination-dots a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
}

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

.pagination-dots a.active {
  color: white;
  background-color: #3b82f6;
}

.pagination-dots .dots {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: #9ca3af;
  font-size: 14px;
  cursor: default;
}
</style>

<!-- HTML -->
<nav aria-label="Pagination">
  <ul class="pagination-responsive">
    <li><a href="#" class="nav-btn" aria-label="Previous page">&larr; Previous</a></li>
    <li class="page-numbers">
      <a href="#">1</a>
      <a href="#" aria-current="page" class="active">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
    </li>
    <li class="page-indicator">Page 2 of 5</li>
    <li><a href="#" class="nav-btn" aria-label="Next page">Next &rarr;</a></li>
  </ul>
</nav>

<!-- CSS -->
<style>
.pagination-responsive {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.pagination-responsive .nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  background-color: #f3f4f6;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.pagination-responsive .nav-btn:hover {
  background-color: #e5e7eb;
}

.pagination-responsive .page-numbers {
  display: flex;
  gap: 4px;
}

.pagination-responsive .page-numbers a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.pagination-responsive .page-numbers a:hover {
  background-color: #f3f4f6;
}

.pagination-responsive .page-numbers a.active {
  color: white;
  background-color: #3b82f6;
}

.pagination-responsive .page-indicator {
  display: none;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

/* Mobile: Hide page numbers, show indicator */
@media (max-width: 640px) {
  .pagination-responsive .page-numbers {
    display: none;
  }
  .pagination-responsive .page-indicator {
    display: block;
  }
}
</style>

<!-- HTML -->
<nav aria-label="Pagination">
  <ul class="pagination-full">
    <li><a href="#" aria-label="First page">&laquo;&laquo;</a></li>
    <li><a href="#" aria-label="Previous page">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page" class="active">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" aria-label="Next page">&raquo;</a></li>
    <li><a href="#" aria-label="Last page">&raquo;&raquo;</a></li>
  </ul>
</nav>

<!-- CSS -->
<style>
.pagination-full {
  display: flex;
  list-style: none;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.pagination-full a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pagination-full a:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

.pagination-full a.active {
  color: white;
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.pagination-full a[aria-label="First page"],
.pagination-full a[aria-label="Last page"] {
  color: #6b7280;
}
</style>