HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Learn how to create a responsive pagination using CSS
If you have a website with lots of pages, you may wish to add some sort of pagination to each page:
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
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:
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Rounded Active and Hoverable Buttons
Add the border-radius
property if you want a rounded "active" and "hover" button:
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Hoverable Transition Effect
Add the transition
property to the page links to create a transition effect on hover:
.pagination a {
transition: background-color .3s;
}
Use the border
property to add borders to the pagination:
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Rounded Borders
.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;
}
Space Between Links
margin
property if you do not want to group the page links:
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Change the size of the pagination with the font-size
property:
.pagination a {
font-size: 22px;
}
To center the pagination, wrap a container element (like <div>) around it with text-align:center
.center {
text-align: center;
}
Another variation of pagination is so-called "breadcrumbs":
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";
}