Introduction to CSS Pagination
Pagination is the method by which the document is separated into pages, and numbers are given. Pagination makes it easy to find a huge amount of content and decomposes multiple entries or web content into various pages, enabling you to toggle content through it easily. Pagination web links basically enable your content to be surfed by visitors. CSS pagination is a quite good method for indexing on the homepage various pages of a website. When you have loads of pages on your website, you need to add some pagination for each page.
Types of Pagination in CSS
Below are the types of Pagination in CSS:
- Simple Pagination
- Active and Hoverable Pagination
- Rounded Active and Hoverable Buttons
- Bordered Pagination
- Rounded Border Pagination
- Centered Pagination
- Space between Pagination
- Pagination Size
1. Simple Pagination
The below example depicts simple pagination. The “pagination” class can be used to define pagination in HTML pages.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination a {
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Simple Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a 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>Save the above code on the HTML page and name it according to your choice. Then, open the file in a browser, and it will display the output as shown in the below image.
Output:
2. Active and Hoverable Pagination
The current page will be displayed using the active class. When the mouse passes over them, Hover will switch the page link color.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination a {
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color:#d7bb6c;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
</style>
</head>
<body>
<h2>Active and Hoverable Pagination</h2>
<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:
3. Rounded Active and Hoverable Buttons
In this type of pagination, the border-radius property can be used for rounded active and hoverable buttons.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Rounded Active and Hoverable Buttons
</title>
<style>
.pagination a {
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color:#d7bb6c;
border-radius:6px;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
border-radius:6px;
}
</style>
</head>
<body>
<h2>Rounded Active and Hoverable Buttons</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a class = "active" 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:
4. Bordered Pagination
This type can be used when you want to add a border to the pagination.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Bordered Pagination
</title>
<style>
.pagination a {
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
}
.pagination a.active {
background-color:#d7bb6c;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
</style>
</head>
<body>
<h2>Bordered Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a class = "active" 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:
5. Rounded Border Pagination
This type can be used when you want to add a rounded border to the pagination by using the border-radius property.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Rounded Bordered Pagination
</title>
<style>
.pagination a {
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius:6px;
border:1px solid grey;
}
.pagination a.active {
background-color:#d7bb6c;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
</style>
</head>
<body>
<h2>Rounded Bordered Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a class = "active" 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:
6. Centered Pagination
This type of pagination can be displayed centered with the help of the text-align property.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Centered Pagination
</title>
<style>
.center {
text-align:center;
}
.pagination a {
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
}
.pagination a.active {
background-color:#d7bb6c;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
</style>
</head>
<body>
<h2>Centered Pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a class = "active" href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>Output:
7. Space Between Pagination
This type of pagination can be used to give space between page links instead of grouping them. Space can be given with the help of margin property between the links.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Space Between Pagination
</title>
<style>
.center {
text-align:center;
}
.pagination a {
font-size: 18px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
}
.pagination a.active {
background-color:#d7bb6c;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
</style>
</head>
<body>
<h2>Space Between Pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a class = "active" href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>Output:
8. Pagination Size
This type of pagination can be used to change the size of the pagination. It can be done by using the font-size property.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Pagination Size
</title>
<style>
.center {
text-align:center;
}
.pagination a {
font-size: 22px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
}
.pagination a.active {
background-color:#d7bb6c;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
</style>
</head>
<body>
<h2>Pagination Size</h2>
<div class="center">
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a class = "active" href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>Output:
Conclusion
So far, we have studied the role of pagination where the huge amount of content can be broken into various HTML pages, and the user can easily toggle with the information with ease. To make content paganized, the pagination class could be used within the HTML elements. Therefore, CSS pagination is very helpful when a large amount of content of the HTML pages can be divided into discrete pages.
Recommended Articles
This is a guide to CSS Pagination. Here we discuss the different types of CSS Pagination like Simple, Active and Hoverable, etc., along with Code Implementation. You can also go through our suggested articles to learn more –
