CSS Pagination Styles
Advanced pagination styling is the topic here: hover effects, transitions, and breadcrumbs.
Pagination with Hover Effect
A page link can change its background color as the mouse moves over it, thanks to the :hover selector.
Example
Only the non-active links react to hovering in this pagination:
Prompt
Create a pagination bar with previous/next arrows and page numbers 1-5. Style the active page with a blue background and white text. Add a hover effect that changes the background color to light gray on non-active links.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Hover Effect</title>
<style>
.pagination {
display: inline-block;
padding: 0;
margin: 0;
list-style: none;
}
.pagination li {
display: inline;
}
.pagination li a {
color: black;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination li a:hover:not(.active) {
background-color: lightgray;
}
</style>
</head>
<body>
<h2>Pagination with Hover Effect</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
Transition Effect on Hover
For a smooth animation while hovering, give the page links the transition property.
Example
On hover, the background color now changes gradually thanks to a transition effect:
Prompt
Create a pagination bar with previous/next arrows and page numbers 1-5. Style the links with a border, border-radius, and padding. Add a CSS transition so the background color change on hover animates smoothly over 1 second.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Transition Effect</title>
<style>
.pagination {
display: inline-block;
padding: 0;
margin: 0;
list-style: none;
}
.pagination li {
display: inline;
}
.pagination li a {
display: inline-block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
transition: background-color 1s;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
}
.pagination li a:hover:not(.active) {
background-color: lightgray;
}
</style>
</head>
<body>
<h2>Pagination with Transition Effect</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
Breadcrumb Pagination
A breadcrumb is a further kind of pagination. It displays the path leading to the current page as links, with a character like "/" between them.
Example
Separators sit between the items of this breadcrumb navigation:
Prompt
Create a breadcrumb navigation with four items: Home, Pictures, Summer 25, and Italy. Style it with a light gray background, no list bullets, inline items, green link color, and a "/" separator between items using CSS content.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breadcrumb Pagination</title>
<style>
ul.breadcrumb {
padding: 8px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {
display: inline;
}
ul.breadcrumb li a {
color: green;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
</style>
</head>
<body>
<h2>Breadcrumb Pagination</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 25</a></li>
<li>Italy</li>
</ul>
</body>
</html>