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
How to create a pagination with CSS?
When you give page numbers to each page of a book, it is called pagination. On a website, pagination allows dividing content across multiple pages with a series of interconnected links. It helps users navigate through large amounts of content by showing page numbers like 1, 2, 3, 4, 5 along with previous and next navigation buttons.
Syntax
.pagination {
display: inline-block;
/* Additional styling properties */
}
.pagination a {
display: inline-block;
padding: value;
text-decoration: none;
/* Link styling */
}
HTML Structure
The pagination structure uses anchor links wrapped in a container div −
<div class="pagination"> <a href="#">«</a> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">»</a> </div>
Example: Basic Pagination
The following example creates a complete pagination component with hover effects and active state −
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
margin: 20px 0;
background-color: #f1f1f1;
border-radius: 5px;
overflow: hidden;
}
.pagination a {
display: inline-block;
padding: 12px 16px;
text-decoration: none;
color: #333;
background-color: white;
border: 1px solid #ddd;
margin-left: -1px;
transition: background-color 0.3s;
}
.pagination a:hover {
background-color: #007bff;
color: white;
}
.pagination a.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}
.pagination a:first-child {
border-radius: 5px 0 0 5px;
}
.pagination a:last-child {
border-radius: 0 5px 5px 0;
}
</style>
</head>
<body>
<h2>CSS Pagination Example</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
<p>Hover over the page numbers to see the effect.</p>
</body>
</html>
A horizontal pagination component appears with rounded corners. Page numbers 1-5 are displayed with Previous («) and Next (») buttons. Page 1 is highlighted in blue as the active page. Hovering over other numbers changes their background to blue.
Example: Centered Pagination
This example shows how to center the pagination on the page −
<!DOCTYPE html>
<html>
<head>
<style>
.pagination-container {
text-align: center;
margin: 50px 0;
}
.pagination {
display: inline-block;
}
.pagination a {
display: inline-block;
padding: 10px 15px;
margin: 0 4px;
text-decoration: none;
color: #333;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
transition: all 0.2s;
}
.pagination a:hover {
background-color: #e9ecef;
border-color: #adb5bd;
}
.pagination a.active {
background-color: #28a745;
color: white;
border-color: #28a745;
}
</style>
</head>
<body>
<h2>Centered Pagination</h2>
<div class="pagination-container">
<div class="pagination">
<a href="#">Previous</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">Next</a>
</div>
</div>
</body>
</html>
A centered pagination component with separated rounded buttons. Each page number has its own rounded border with spacing between them. The active page (1) is highlighted in green. Text labels "Previous" and "Next" replace the arrow symbols.
Key Points
- Use
display: inline-blockfor the pagination container - Apply
text-decoration: noneto remove underlines from links - Use hover effects to improve user experience
- Highlight the active/current page with a distinct background color
- Include Previous/Next buttons for better navigation
Conclusion
CSS pagination provides an effective way to navigate through multiple pages of content. By combining proper HTML structure with CSS styling, you can create user-friendly pagination components with hover effects and active states.
Updated on: 2026-03-15T14:22:00+05:30
269 Views
Advertisements