CSS Pagination Examples
In this section, we will introduce examples of how to create pagination using CSS.
Simple Pagination
If your website has many pages, you need to use pagination to provide navigation for each page.
The following examples demonstrate how to use HTML and CSS to create pagination:
CSS Examples
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
Try it Yourself »
Click and hover pagination styles
If you click on the current page, you can use.activeTo set the current page style, you can use mouse hover.:hoverthe selector to modify the style:
CSS Examples
background-color: #4C7EAF;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
Try it Yourself »
CSS Examples
background-color: #4C7EAF;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
Try it Yourself »
Rounded Corner Style
You can useborder-radiusAttribute to add a rounded corner style to the selected page number:
CSS Examples
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Try it Yourself »
Hover transition effect
We can addtransitionAttribute to add a transition effect when the mouse moves over the page number:
Pagination with borders
We can useborderthe attribute to add pagination with borders:
Rounded border
Tip:Add rounded corners to the first pagination link and the last pagination link:
CSS Examples
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Try it Yourself »
Pagination Gap
Tip:You can usemarginAttribute to directly add spaces between each page number:
CSS Examples
margin: 0 4px; /* 0 corresponds to the top and bottom, you can modify it to see the effect */
}
Try it Yourself »
Pagination font size
We can usefont-sizethe attribute to set the font size of pagination:
Centered Pagination
If you want to center the pagination, you can add it to the container element (such as <div>)text-align:centerstyle:
More Examples
Breadcrumb navigation
Another type of navigation is breadcrumb navigation, as shown in the following example:
CSS Examples
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
Try it Yourself »