Pagination
When there are multiple pages on a website, pagination can be used to number them for easy identification. Various types of pagination which can be used are as follows:
Rounded Active and Hoverable Buttons
Hoverable Transition Effect
Bordered Pagination
Rounded Border Pagination
Centered Pagination
Space between Pagination
Pagination Size
Example No.1:
<![CDATA[
<html>
<html lang="en-US">
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Knowledge2life</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">Knowledge2life 1</a>
<a href="#">Knowledge2life2</a>
<a href="#">Knowledge2life 3</a>
<a href="#">»</a>
</div>
</body>
</html>]]>
OUTPUT:
Example No.2:
<![CDATA[
<html>
<html lang="en-US">
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Knowledge2life</h2>
<div class="pagination">
<a href="#">«</a>
<a class="active" href="#">Knowledge2life 1</a>
<a href="#">Knowledge2life2</a>
<a href="#">Knowledge2life 3</a>
<a href="#">»</a>
</div>
</body>
</html>
]]>
OUTPUT:
