CSS Pagination Examples
Learn how to create a responsive pagination using CSS.
Simple Pagination
If you have a website with lots of pages, you may wish to add some sort of
pagination to each page:
«
1
2
3
4
5
6
»
❮
❯
Example
.pagination { display: inline-block;}.pagination a { color:
black; float: left; padding: 8px
16px; text-decoration: none;}
Try it Yourself »
Active and Hoverable Pagination
«
1
2
3
4
5
6
7
»
Highlight the current page with an .active
class, and use the :hover
selector to change the color of each page link when moving the mouse over them:
Example
.pagination a.active { background-color:
#4CAF50; color: white;}.pagination a:hover:not(.active) {background-color: #ddd;}
Try it Yourself »
Rounded Active and Hoverable Buttons
«
1
2
3
4
5
6
7
»
Add the border-radius property if you want a rounded "active" and "hover" button:
Example
.pagination a { border-radius: 5px;}.pagination a.active { border-radius: 5px;}
Try it Yourself »
Hoverable Transition Effect
«
1
2
3
4
5
6
7
»
Add the transition property to the page links to create a transition effect on hover:
Example
.pagination a { transition: background-color .3s;}
Try it Yourself »
Bordered Pagination
«
1
2
3
4
5
6
7
»
Use the border property to add borders to the pagination:
Example
.pagination a { border: 1px solid #ddd; /* Gray
*/}
Try it Yourself »
Rounded Borders
Tip: Add rounded borders to your first and last link in the
pagination:
«
1
2
3
4
5
6
7
»
Example
.pagination a:first-child { border-top-left-radius:
5px; border-bottom-left-radius: 5px;}.pagination
a:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
Try it Yourself »
Space Between Links
Tip: Add the margin property if you do not want to group the page links:
«
1
2
3
4
5
6
7
»
Example
.pagination a { margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */}
Try it Yourself »
Pagination Size
«
1
2
3
4
5
6
7
»
Change the size of the pagination with the font-size property:
Example
.pagination a { font-size: 22px;}
Try it Yourself »
Centered Pagination
«
1
2
3
4
5
6
7
»
To center the pagination, wrap a container element (like <div>) around it with text-align:center
Example
.center { text-align: center;}
Try it Yourself »
More Examples
Example
Try it Yourself »
Breadcrumbs
Home
Pictures
Summer 15
Italy
Another variation of pagination is so-called "breadcrumbs":
Example
ul.breadcrumb { 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 »
★
+1
Reference: https://www.w3schools.com/css/css3_pagination.asp
CSS Pagination Examples
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.