/    /  CSS Pagination

CSS Pagination

 

The CSS pagination is a more useful technique for indexing multiple pages of a website on the homepage. If your website has more pages, you have to add some sort of pagination(CSS pagination) to each page.

 

Basic Pagination:

 

<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
   display: inline-block;
   padding: 0;
   margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
}
</style>
</head>
<body>
<h2>Basic Pagination</h2>
<ul class="pagination">
 <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>
</ul>
</body>
</html>

 

OUTPUT:

 

CSS Pagination

 

Rounded Active and Hoverable Pagination:

 

<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
   display: inline-block;
   padding: 0;
   margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
   border-radius: 5px;
}
ul.pagination li a.active {
   background-color: brown;
   color: white;
   border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Rounded Active and Hover Buttons</h2>
<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 Pagination