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 . Use of Display Visibility in CSS
2 . What is an HTML Tag?
3 . How to use label in HTML
4 . Create Interactive Form using CSS

5 . How to add pagination on Webpage
6 . How to use CSS 2D Transform ?
7 . Create Youtube Thumbnail Generater in PHP
8 . Photography Snippets using HTML and CSS

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