CSS Showcase · Live Demo

Pagination that scales.

Interactive pagination — numbered windows with ellipsis, compact page selectors, load-more buttons, and mobile-first prev/next and infinite-scroll patterns.

Featured demo

mobile · prev-next

Results

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Page 1 of 10

mobile design patterns

pagination-prev-next.css

/* Mobile full-width prev/next controls */
.prev-next-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.prev-next-bar button {
  padding-block: 0.6rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  font-weight: 600;
}

.prev-next-bar button:disabled {
  opacity: 0.4;
}

CSS features used

• CSS grid controls
• aria-current styling
• @keyframes spinner
• color-mix hover states
• disabled state opacity
• Semantic tokens