CSS Pagination Examples
CSS Pagination
Learn how to create a responsive pagination using CSS.
If you have a website with lots of pages, you may want to add some sort of pagination on each page.
Pagination is typically a series of links, wrapped in an unordered list (<ul>).
Each link represents an individual page number. In addition there are "previous" and "next" controls:
Example
A simple pagination:
.pagination {
display: flex;
justify-content: center;
list-style: none; /* remove list bullets */
padding: 0px;
}
.pagination li a
{
display: block; /* let links fill the list item */
padding: 8px 12px;
text-decoration: none;
border: 1px
solid gray;
color: black;
margin: 0 4px;
border-radius: 5px; /* add
rounded borders */
}
Try it Yourself »
Example Explained
Style the pagination container with:
display: flex;to arrange the page numbers horizontallyjustify-content: center;to center align themlist-style: none;to remove the list bullets
The style the <a> elements within the
<li> elements for the look of the page numbers,
with properties like display,
padding,
text-decoration, border,
background-color,
color, font-size, and
border-radius.
Pagination With an Active Class
Highlight the currently active page with an .active class,
to indicate which page the user is on:
Example
Pagination with an .active class:
.pagination li a.active {
background-color: #4CAF50;
color: white;
}
Try it Yourself »
Pagination With a Disabled Class
If the user are currently on the last page, the "Next" button should be disabled.
Here, we add a .disabled class,
and sets the
color ,
cursor and
pointer-events
properties, to make the "Next" button disabled:
Example
Pagination with a .disabled class:
.pagination li a.disabled {
color: #dddddd;
cursor:
not-allowed;
pointer-events: none;
}
Try it Yourself »
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 »
