CSS Pagination Styles
This page covers advanced pagination styling including hover effects, transitions, and breadcrumbs.
Pagination with Hover Effect
Use the :hover
selector to change the background color of each page link when the user hovers over them:
Example
Pagination with hover effect:
.pagination li a:hover:not(.active) {
background-color: lightgray;
}
Try it Yourself »
Transition Effect on Hover
Add the transition property to the page links to create a transition effect on hover:
Example
Add transition effect on hover:
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color:
black;
margin: 0 4px;
border-radius: 5px;
transition: background-color 1s;
}
Try it Yourself »
Breadcrumb Pagination
Another variation of pagination is a so-called "breadcrumb":
Example
Create a breadcrumb:
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";
}
Try it Yourself »
