• In website, Pagination is a simple sequence of pages.
  • These pages have similar content to display and are interconnected to the users.
  • Multiple pages may be needed for a better user experience, easier navigation, personas, the buyer’s journey, and other reasons.
  • It is a prime example of e-commerce websites.
  • In a single page, it would be inefficient for Amazon to list all of its items in a single category.
  • If necessary, products specifications and images can be divided into several websites.

For example,

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: dodgerblue;
  color: black;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Welcome to Wikitechy</h2>
<p>Responsive pagination with hover effects:</p>

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" 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:

Categorized in:

Web Designing

Tagged in:

, , , , , , , , , , , , , ,