Pagination

Pagination is navigation for dividing content into multiple pages. In CSS, pagination is usually built using a list (<ul>) with the items serving as navigation buttons. Each item has a different state: normal, hover, active, and disabled.

There are various pagination styles: button style with a colored background, border style with an outline, pill/rounded style, and arrow-based navigation. The style choice depends on the usage context and the design system being used.

Pagination can also function as a step indicator for multi-step forms or wizard-style interfaces.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 40px 20px;
    background: #f5f5f5;
  }

  .demo-section {
    max-width: 700px;
    margin: 0 auto 40px;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .demo-section h3 {
    margin-top: 0;
    color: #333;
  }

  /* Basic Pagination */
  .pagination {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .pagination a,
  .pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
    color: #555;
    background: #f0f0f0;
  }

  .pagination a:hover {
    background: #667eea;
    color: white;
    transform: translateY(-1px);
  }

  .pagination .active {
    background: #667eea;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  }

  .pagination .disabled {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Rounded/Pill Pagination */
  .pagination-rounded a,
  .pagination-rounded span {
    border-radius: 50%;
    min-width: 42px;
    height: 42px;
    padding: 0;
  }

  .pagination-rounded a:hover {
    transform: scale(1.1);
  }

  .pagination-rounded .active {
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.5);
  }

  /* Border Style Pagination */
  .pagination-bordered {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    display: inline-flex;
  }

  .pagination-bordered a,
  .pagination-bordered span {
    border-radius: 0;
    border-right: 1px solid #e0e0e0;
    min-width: 42px;
    height: 42px;
    background: white;
    color: #555;
  }

  .pagination-bordered a:last-child,
  .pagination-bordered span:last-child {
    border-right: none;
  }

  .pagination-bordered a:hover {
    background: #f0f4ff;
    color: #667eea;
  }

  .pagination-bordered .active {
    background: #667eea;
    color: white;
  }

  /* Arrow Pagination */
  .pagination-arrow a,
  .pagination-arrow span {
    gap: 4px;
    font-size: 0.85em;
  }

  .pagination-arrow .arrow {
    font-size: 1.1em;
    font-weight: bold;
  }

  /* Step Indicator */
  .steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .step-item {
    display: flex;
    align-items: center;
  }

  .step-item .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
  }

  .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9em;
    border: 2px solid #ddd;
    background: white;
    color: #999;
    transition: all 0.3s;
  }

  .step-label {
    font-size: 0.8em;
    color: #999;
    white-space: nowrap;
  }

  .step-line {
    width: 80px;
    height: 2px;
    background: #ddd;
    margin: 0 10px;
    margin-bottom: 22px;
  }

  .step-item.completed .step-circle {
    background: #00b894;
    border-color: #00b894;
    color: white;
  }

  .step-item.completed .step-label {
    color: #00b894;
  }

  .step-item.completed + .step-item .step-line,
  .step-line.active {
    background: #00b894;
  }

  .step-item.active .step-circle {
    background: #667eea;
    border-color: #667eea;
    color: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
  }

  .step-item.active .step-label {
    color: #667eea;
    font-weight: 600;
  }
</style>
</head>
<body>
  <div class="demo-section">
    <h3>Pagination Dasar</h3>
    <ul class="pagination">
      <li><a href="#" class="disabled">‹</a></li>
      <li><a href="#" class="active">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">›</a></li>
    </ul>
  </div>

  <div class="demo-section">
    <h3>Rounded Pagination</h3>
    <ul class="pagination pagination-rounded">
      <li><a href="#">‹</a></li>
      <li><a href="#">1</a></li>
      <li><span class="active">2</span></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">›</a></li>
    </ul>
  </div>

  <div class="demo-section">
    <h3>Border Style</h3>
    <div class="pagination-bordered">
      <a href="#">‹ Prev</a>
      <span class="active">1</span>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">Next ›</a>
    </div>
  </div>

  <div class="demo-section">
    <h3>Arrow Pagination</h3>
    <ul class="pagination pagination-arrow">
      <li><a href="#" class="disabled"><span class="arrow">«</span> First</a></li>
      <li><a href="#"><span class="arrow">‹</span> Previous</a></li>
      <li><a href="#" class="active">5</a></li>
      <li><a href="#">Next <span class="arrow">›</span></a></li>
      <li><a href="#">Last <span class="arrow">»</span></a></li>
    </ul>
  </div>

  <div class="demo-section">
    <h3>Step Indicator (Checkout)</h3>
    <ul class="steps">
      <li class="step-item completed">
        <div class="step">
          <div class="step-circle">✓</div>
          <div class="step-label">Cart</div>
        </div>
        <div class="step-line"></div>
      </li>
      <li class="step-item completed">
        <div class="step">
          <div class="step-circle">✓</div>
          <div class="step-label">Pengiriman</div>
        </div>
        <div class="step-line"></div>
      </li>
      <li class="step-item active">
        <div class="step">
          <div class="step-circle">3</div>
          <div class="step-label">Payment</div>
        </div>
        <div class="step-line"></div>
      </li>
      <li class="step-item">
        <div class="step">
          <div class="step-circle">4</div>
          <div class="step-label">Done</div>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

Code Explanation

Basic pagination: Uses a <ul> with <li> and <a>. Flexbox keeps the items aligned. gap provides spacing between items. The active state uses the .active class.

:hover effect: The background changes color and transform: translateY(-1px) provides a subtle lift effect. On rounded pagination, scale(1.1) provides a zoom effect.

Disabled state: pointer-events: none prevents clicking, and a low opacity gives a visual hint that the item is inactive.

Border style: The pagination is wrapped in a bordered container. Each item has a border-right as a divider. The container has overflow: hidden and border-radius for neat corners.

Arrow pagination: Uses text labels with arrow symbols. More informative than numbers alone.

Step indicator: Each step consists of a circle (number/icon), a label, and a connector line. The completed (green), active (blue), and pending (gray) states distinguish the status of each step.

Everyday Use Cases

Blog pagination: Basic pagination for navigating blog articles with page numbers.

E-commerce: A step indicator for the checkout process (Cart → Shipping → Payment → Done).

Data table: Pagination for a data table with many rows.

Gallery: Navigation for a photo gallery divided across multiple pages.

Conclusion

Pagination in CSS is built from list elements with good state management. The four main styles: basic (button), rounded (pill), bordered (outline), and arrow (text-based). Step indicators use a similar concept with added connector lines. Hover effects, active states, and disabled states must be clearly defined for good UX.