LAST UPDATED: AUGUST 16, 2021
How to create pagination with CSS
A website generally contains a lot of pages. We can use pagination to number them accordingly in a sequence. It will help the user to go through the web pages sequentially. The pagination can be added to a webpage with CSS.
Creating a pagination
A pagination is a number that is generally placed at the bottom of a page. There may be some previous and next buttons too with pagination. The page numbers are displayed horizontally so use display: inline-block property. The pagination contains the link of the page so use text-decoration:none to remove the default underline of the links. We can add the background-color, padding to the links. Additionally, add the :hover effect to the pagination links.
Example: Creating pagination with CSS
In this example, we have created pagination with previous and next links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.pagination a {
color: green;
float: left;
padding: 8px;
text-decoration: none;
transition: 0.2s;
}
.pagination a.active {
background-color: green;
color: black;
}
.pagination a:hover:not(.active) {
background-color: #cccccc;
}
</style>
</head>
<body>
<h2> Pagination</h2>
<p> Here is the pagination </p>
<div class="pagination">
<a href="#" >«</a>
<a href="#"class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</body>
</html>
Output
Here is the output of the above example.
Example: Creating pagination with CSS
In this example, we have added border to the pagination link. Also, align it to the center by wrapping the .pagination class in the .center class and adding text-align: center property.
Conclusion
In this tutorial, we have learned to create pagination with CSS. Here we have created two simple paginations where one is left-aligned without border and the second is center aligned with a border around each link.
