Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set style for pagination with CSS
CSS pagination styling helps create user-friendly navigation for websites with multiple pages. You can style pagination links to provide clear visual feedback and improve user experience.
Basic Syntax
.pagination {
display: inline-block;
}
.pagination a {
float: left;
padding: value;
text-decoration: none;
color: value;
}
Example: Basic Pagination Styling
The following example demonstrates how to create styled pagination links −
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: #007bff;
float: left;
padding: 8px 12px;
text-decoration: none;
border: 1px solid #ddd;
margin: 0 2px;
border-radius: 4px;
transition: background-color 0.3s;
}
.pagination a:hover {
background-color: #e9ecef;
}
.pagination a.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class="pagination">
<a href="/prev.html">«</a>
<a href="/quiz1.html" class="active">1</a>
<a href="/quiz2.html">2</a>
<a href="/quiz3.html">3</a>
<a href="/quiz4.html">4</a>
<a href="/next.html">»</a>
</div>
</body>
</html>
A horizontal pagination bar appears with styled links. The links have blue color, borders, padding, and rounded corners. The active page (1) is highlighted in blue with white text. Hover effects change the background to light gray.
Example: Centered Pagination with Enhanced Styling
This example shows a centered pagination with better visual design −
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: flex;
justify-content: center;
margin: 20px 0;
}
.pagination a {
color: #495057;
padding: 10px 15px;
text-decoration: none;
border: 1px solid #dee2e6;
margin: 0 3px;
background-color: #fff;
font-size: 14px;
font-weight: 500;
}
.pagination a:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.pagination a:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.pagination a:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
}
.pagination a.active {
background-color: #28a745;
color: white;
border-color: #28a745;
}
</style>
</head>
<body>
<h2>Product Pages</h2>
<div class="pagination">
<a href="/prev">Previous</a>
<a href="/page1">1</a>
<a href="/page2" class="active">2</a>
<a href="/page3">3</a>
<a href="/page4">4</a>
<a href="/next">Next</a>
</div>
</body>
</html>
A centered pagination bar with connected buttons appears. The first and last buttons have rounded corners on the outer edges. The active page (2) is highlighted in green. Hover effects add subtle background color changes.
Conclusion
CSS pagination styling improves navigation usability through visual feedback like hover effects, active states, and proper spacing. Use flexbox for centering and consistent styling across all pagination elements.
Updated on: 2026-03-15T12:58:56+05:30
136 Views
Advertisements