Advertisement

Advertisement


CSS Pagination

Pagination helps us to make large amounts of content break into many entries in several pages which helps us the user to visit the site with ease.

It gives unique values to each page. The pagination class is used with the element whose content is to be paginized.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Pagination </title>
<meta charset="UTF-8">
<style>
.pagination li {display: inline;}
.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Simple Pagination</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>

Output

CSS Pagination

Simple Pagination


Pagination with Hover effect and .active class

For this kind of pagination effect, you should add active class to the current page, along with the :hover selector to change the color of each page link when mouse cursor moves over it. You can also use border property to add borders in the pagination.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Hover on Pagination </title>
<meta charset="UTF-8">
<style>
.pagination li {display: inline;}
.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>

Output

CSS Hover on Pagination

Active and Hoverable Pagination

Move the mouse over the numbers.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.