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
Add hoverable pagination with CSS
Pagination is used to separate content into multiple pages with navigation numbers. This makes it easier to browse through large amounts of content by dividing entries into manageable sections. Hoverable pagination enhances user experience by providing visual feedback when users hover over page numbers.
Syntax
.pagination a {
display: inline-block;
padding: value;
text-decoration: none;
}
.pagination a:hover {
background-color: color;
}
.pagination a.active {
background-color: color;
}
Key CSS Properties for Pagination
| Property | Purpose |
|---|---|
display: inline-block |
Displays page numbers horizontally |
text-decoration: none |
Removes default link underlines |
:hover |
Adds hover effect for better interaction |
.active |
Highlights the current page |
Example 1: Basic Hoverable Pagination
The following example creates a simple pagination with hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
.pagination a {
font-size: 18px;
float: left;
padding: 12px 16px;
text-decoration: none;
color: #333;
margin: 0 2px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a class="active" href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</body>
</html>
A horizontal pagination with previous/next arrows and numbered pages. Page 3 is highlighted in green. Hovering over other pages shows a light gray background.
Example 2: Rounded Hoverable Pagination
This example creates pagination with rounded corners using border-radius −
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
text-align: center;
margin: 20px 0;
}
.pagination li {
display: inline;
}
.pagination li a {
color: #007bff;
font-size: 16px;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 25px;
margin: 0 4px;
border: 2px solid #007bff;
}
.pagination li a.active {
background-color: #007bff;
color: white;
}
.pagination li a:hover:not(.active) {
background-color: #e9ecef;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a class="active" href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
A centered pagination with fully rounded buttons bordered in blue. Page 3 has a blue background with white text. Hovering shows a light gray background effect.
Example 3: Bordered Pagination
The following example demonstrates bordered pagination with connected page numbers −
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
.pagination {
display: inline-block;
padding: 0;
margin: 20px 0;
}
.pagination li {
display: inline;
}
.pagination li a {
float: left;
padding: 12px 16px;
text-decoration: none;
border: 1px solid #ddd;
color: #333;
margin-left: -1px;
}
.pagination li a.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}
.pagination li a:hover:not(.active) {
background-color: #e9ecef;
border-color: #dee2e6;
}
.pagination li:first-child a {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination li:last-child a {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
</style>
</head>
<body>
<h2>Bordered Pagination</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a class="active" href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
A connected pagination with shared borders between page numbers. The first and last buttons have rounded corners. Page 3 is highlighted in blue, and hovering shows a light gray background.
Conclusion
Hoverable pagination improves user experience by providing visual feedback on interaction. Use :hover pseudo-class for hover effects and .active class to highlight the current page.
Updated on: 2026-03-15T12:59:52+05:30
333 Views
Advertisements