CSS - Buttons & Pagination

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–15 minutes

Create consistent, accessible buttons and pagination controls as part of your component library.

Learning Objectives

• Build reusable button variants (primary, ghost, danger).
• Style pagination with focus and hover feedback.

Details & Examples

.btn{ appearance:none; border:1px solid var(--border); background:linear-gradient(180deg, rgba(96,165,250,.18), rgba(96,165,250,.12)); color:var(--text); padding:.5rem .75rem; border-radius:.5rem; }
.btn--primary{ background:#2563eb; color:white; border-color:#1d4ed8; }
.btn--danger{ background:#ef4444; color:white; border-color:#dc2626; }
.pagination a{ padding:.4rem .6rem; border:1px solid var(--border); border-radius:.5rem; display:inline-block; }
.pagination a:focus-visible{ outline:3px solid #34d399; outline-offset:2px; }

Try it

Checks for Understanding

1. Why should pagination links have clear focus styles?

Exercises

1. Create primary, secondary, and destructive button variants and define their focus-visible styles.
2. Build a pagination control with current page emphasis and disabled prev/next at ends.