CSS Pagination
The pagination is basically used to display the items in a row. CSS pagination is a way of adding consecutive numbers to the web pages of any website to arrange them in a sequence. This technique is used when a website consists of lots of pages then it is needed to add pagination for each page.
Pagination makes it very easy to find a large amount of content and can break the web content into multiple pages, which enables the user to easily toggle web content.
Types of pagination in CSS
There are several types of pagination available in the CSS, out of which some are given below:
- Simple Pagination
- Active and Hoverable Pagination
- Pagination with Round and Hoverable buttons
- Bordered Pagination
- Centered and space between pagination
Simple Pagination in CSS
Simple pagination is a very basic way of creating pagination links. To add the pagination to your website, you have to add the .pagination class to the <ul> element to set the CSS styling properties.
Example: Creating Pagination in CSS
In this example, we have demonstrated how we can create simple pagination. As we know we have created the links using the <ul> elements that place the links within the new line. To place the links side by side we have to specify the CSS display property with value inline within the ul .pagination class.
<!DOCTYPE html>
<html>
<head>
<title>Basic Pagination</title>
<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;
}
.pagination li a.active {
background-color: #1183ed;
color: white;
border-radius: 5px;
}
</style>
</head>
<body>
<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:
As we can see in the output image, the numbers denote the pagination and the number with blue background denotes the active page
Active and hoverable pagination in CSS
The active and hoverable pagination is used when we want to highlight the current pagination link and also want the background color of each link to get change whenever we move the cursor over the links. Basically, we have to use the .active class and the :hover selector to create this kind of effect.
Example of creating active and hoverable pagination in CSS
In this example, we have demonstrated how we can create pagination buttons with active and hover effect using :hover property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Active and Hoverable Pagination</title>
<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: #1183ed;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<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:
In the given output, when we move the cursor over any of the paginations links the background color of the links turns from white to gray and the background color blue denotes the active page.
Pagination with Round and hoverable buttons in CSS
This effect is very much similar to the active and hoverable effect but this effect consists of one more additional effect and that is round corners. To add this effect to the pagination links, we have to add the CSS border-radius property along with the .active class and :hover selectors.
Example of creating round and hoverable pagination buttons in CSS
In this example, we have demonstrated how we can create the pagination buttons with rounded corners and a hover effect.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Active and Hoverable Pagination</title>
<style>
.pagination li {display: inline;}
.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 8px;
}
ul.pagination li a.active {
background-color: #1183ed;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<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:
As we can see in the output image, the corners of the buttons become rounded.
Bordered pagination effect in CSS
In the previous lessons, there are no borders around the pagination links. In this lesson, we are going to create the bordered pagination effect.
The bordered pagination effect consists of the border around the pagination links. To add the border to the pagination links, we have to add the CSS border property.
Example of creating bordered pagination in CSS
In this example, we have demonstrated how we can create the border around the pagination links. So we have added the border property with a value of 1px solid black within the .pagination class.
<!DOCTYPE html>
<html>
<head>
<title>Bordered Pagination Effect</title>
<style>
.pagination {
display: inline-block;
}
.pagination a {
font-size:20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid black;
}
.pagination a.active {
background-color: #1183ed;
}
.pagination a:hover:not(.active) {
background-color: #7e7f80;
}
</style>
</head>
<body>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a class="active" href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</body>
</html>
Output:
As we can see in the output image that there are borders around the pagination links.
Centered and space between pagination in CSS
The centered space between pagination links is situated in the center of the web page and having space between each link. To create the centered and space between pagination links, we have to add the text-align property with value center to place the links at the center, and margin property to provide the space between the links.
Example of creating centered and space between pagination in CSS
In this example, we have aligned the pagination button in the center using text-align: center; property, to provide the space between the pagination links we have specified the CSS margin and to provide the space between the border of the pagination link and the content inside it we have specified the CSS padding property.
Conclusion
In this lesson, we have learned how to create pagination links. The links that have background color denote the active page. We have also learned how to style these links in multiple ways such as to provide the border, center aligned the pagination links etc.
