CSS Pagination Example
In this section, we will introduce how to create pagination examples using CSS.
Simple Pagination
If your website has many pages, you need to use pagination to provide navigation for each page.
The following example demonstrates how to create pagination using HTML and CSS:
CSS Example
ul.pagination { 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;}
Click and Hover Pagination Styles
-«
-1
-2
-3
-4
-5
-6
-7
-»
If you click on the current page, you can use .active to set the current page style, and use the :hover selector to modify the style on mouse hover:
CSS Example
ul.pagination li a.active { background-color:
#4CAF50; color: white;}ul.pagination li
a:hover:not(.active) {background-color: #ddd;}
CSS Example
ul.pagination li a.active { background-color:
#4CAF50; color: white;}ul.pagination li
a:hover:not(.active) {background-color: #ddd;}
Rounded Corners Style
-«
-1
-2
-3
-4
-5
-6
-7
-»
You can use the border-radius property to add rounded corners to the selected page number:
CSS Example
ul.pagination li a { border-radius: 5px;}ul.pagination li a.active {
border-radius: 5px;}
Hover Transition Effect
-«
-1
-2
-3
-4
-5
-6
-7
-»
We can add a transition effect when the mouse moves over the page number by adding the transition property:
CSS Example
ul.pagination li a { transition: background-color .3s;}
Pagination with Borders
-«
-1
-2
-3
-4
-5
-6
-7
-»
We can use the border property to add bordered pagination:
CSS Example
ul.pagination li a { border: 1px solid #ddd; /* Gray */}
Rounded Borders
Tip: Add rounded corners to the first and last pagination links:
-«
-1
-2
-3
-4
-5
-6
-7
-»
CSS Example
.pagination li:first-child a { 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;}
Pagination Spacing
Tip: You can use the margin property to add space between each page number:
-«
-1
-2
-3
-4
-5
-6
-7
-»
CSS Example
ul.pagination li a { margin: 0 4px; /* 0 corresponds to the top and bottom, you can modify it to see the effect */}
Pagination Font Size
-«
-1
-2
-3
-4
-5
-6
-7
-»
We can use the font-size property to set the font size of the pagination:
CSS Example
ul.pagination li a { font-size: 22px;}
Centered Pagination
-«
-1
-2
-3
-4
-5
-6
-7
-»
To center the pagination, you can add the text-align:center style to the container element (like <div>):
CSS Example
div.center { text-align: center;}
More Examples
CSS Example
Breadcrumb Navigation
-Home
- HTML Paragraph
Another type of navigation is breadcrumb navigation, as shown in the example below:
CSS Example
ul.breadcrumb { padding: 8px 16px; list-style: none; background-color: #eee;}ul.breadcrumb li {display: inline;}ul.breadcrumb li+li:before { content: "/\00a0";}
padding: 8px; color: black;
content: "/\00a0";