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.





Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements