CSS Pagination
Creating navigation for multi-page content
📄 What is CSS Pagination?
CSS Pagination helps users navigate through multiple pages of content. It's essential for websites with lots of data like blogs, product listings, or search results.
/* Basic pagination styling */
.pagination {
display: flex;
justify-content: center;
gap: 8px;
margin: 20px 0;
}
.pagination a {
padding: 8px 12px;
text-decoration: none;
border: 1px solid #ddd;
color: #007bff;
}
.pagination a:hover {
background-color: #007bff;
color: white;
}
Pagination Styles
Simple Numbers
Basic numbered pagination
.pagination a {
padding: 10px 15px;
margin: 0 4px;
border-radius: 4px;
}Rounded Style
Modern rounded pagination
.pagination a {
border-radius: 50%;
width: 40px;
height: 40px;
}Active State
Highlight current page
.pagination .active {
background-color: #007bff;
color: white;
}Responsive
Mobile-friendly pagination
@media (max-width: 768px) {
.pagination {
font-size: 14px;
}
}🔹 Complete Pagination Example
Complete pagination components require careful integration of accessibility, responsive design, and visual feedback mechanisms. A robust implementation includes semantic HTML with <nav> and <ul> elements, ARIA labels for screen readers, and keyboard navigation support. Visually, pagination should indicate current position clearly while providing clear affordances for navigation actions. Responsive considerations include collapsing page number lists on mobile devices while maintaining previous/next controls, touch-friendly tap targets, and appropriate spacing. Additional features might include ellipsis indicators for truncated page ranges, hover and focus states for interactive feedback, and integration with JavaScript frameworks for dynamic content loading without full page refreshes.
/* Modern Pagination Styles */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
margin: 40px 0;
font-family: 'Inter', sans-serif;
}
.pagination a,
.pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
text-decoration: none;
border: 1px solid #e1e5e9;
border-radius: 8px;
color: #374151;
font-weight: 500;
transition: all 0.2s ease;
}
.pagination a:hover {
background-color: #f3f4f6;
border-color: #d1d5db;
}
.pagination .active {
background-color: #3b82f6;
border-color: #3b82f6;
color: white;
}
.pagination .disabled {
color: #9ca3af;
cursor: not-allowed;
}