CSS Pagination
Pagination is navigation between real result pages. Use anchors and a current-page state rather than relying on button-like decoration alone.
How it works
- Use actual links for navigation and buttons for actions. CSS should reinforce the behaviour the HTML already promises.
- Try a long label and keyboard focus before using the pattern in a production page.
A practical example
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<nav aria-label="Results pages"><ol class="pages"><li><a href="#page1">1</a></li><li><a href="#page2" aria-current="page">2</a></li><li><a href="#page3">3</a></li></ol></nav>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
.pages { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.pages a { display: block; padding: 10px 14px; border: 1px solid #a7bdaa; border-radius: 6px; }
Pagination is navigation between real result pages. Use anchors and a current-page state rather than relying on button-like decoration alone.