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.

Example Try this code »

<!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.

Example Try this code »

<!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.

Recommended :

1 . How to use Syntax in CSS ?
2 . What is an HTML Tag?
3 . How to Change the Font With CSS ?
4 . Learn CSS Padding

5 . CSS beautiful buttons
6 . Create Filter in CSS
7 . Create Bootstrap 4 Spinner
8 . Create Bootstrap 4 Spinner

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors