صفحه‌بندی (Pagination) برای نمایش داده‌ها در چند صفحه استفاده می‌شه (مثل سایت‌های فروشگاهی یا وبلاگ‌ها). با CSS می‌تونیم ظاهر صفحه‌بندی رو زیبا کنیم.

🔹 مثال ۱: صفحه‌بندی ساده

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">&raquo;</a>
</div>

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}

🔹 مثال ۲: صفحه‌بندی گرد با فاصله

.pagination a {
  color: black;
  float: left;
  padding: 10px 15px;
  text-decoration: none;
  margin: 5px;
  border-radius: 50%;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #2196F3;
  color: white;
  border: 1px solid #2196F3;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}

🔹 مثال ۳: صفحه‌بندی با دکمه‌های بزرگ

.pagination a {
  color: black;
  float: left;
  padding: 14px 20px;
  text-decoration: none;
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.pagination a.active {
  background-color: #f44336;
  color: white;
  border: 1px solid #f44336;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}

🔹 مثال ۴: صفحه‌بندی Center شده

.pagination {
  display: flex;
  justify-content: center;
}

.pagination a {
  color: black;
  padding: 10px 16px;
  text-decoration: none;
  margin: 3px;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #673AB7;
  color: white;
  border: 1px solid #673AB7;
}

✅ با ترکیب border-radius، box-shadow، hover و transition می‌تونی استایل‌های جذاب‌تر بسازی.