CSS Pagination


CSS pagination is a way by which web users can easily jump anywhere in a large collection of related web pages. Pagination is generally in number form, which specifies the nth webpage from starting.

On websites with a large number of web pages, they sort the web pages in this manner.

There are many ways to implement pagination in CSS. We will see some of them in this tutorial.


CSS Pagination Example

Here is a simple example of CSS pagination.

Simple pagination

This is a simple pagination show next and previous buttons and a few pages in between.

  • HTML
.simple-pagination {
  list-style: none;
  padding: 0;
  margin: 0;
}

.simple-pagination li {
  display: inline-block;
  margin: 0 1px;
}

.simple-pagination li a {
  display: inline-block;
  padding: 10px 15px;
  background: #eebe57;
  color: #020202;
  text-decoration: none;
}
<ul class="simple-pagination">
  <li><a href="#">&laquo; prev</a></li>
  <li><a href="#">1</a></li>
  <li><a 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="#">next &raquo;</a></li>
</ul>
Try it

Output:


Round pagination

To create rounded pagination you can use the border-radius property.

The border-radius property is used to create rounded corners on an element. To create a circle you can use 50% value.

  • HTML
.simple-pagination {
  list-style: none;
  padding: 0;
  margin: 0;
}

.simple-pagination li {
  display: inline-block;
  margin: 0 1px;
}

.simple-pagination li a {
  display: inline-block;
  padding: 10px 15px;
  background: #eebe57;
  color: #020202;
  text-decoration: none;
  /* round border */
  border-radius: 50%;
}
<ul class="simple-pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a 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="#">&raquo;</a></li>
</ul>
Try it

Output:


Pagination with Hover effect

The hover effect of pagination is initiated when you take the mouse pointer over the pagination buttons.

To define the hover effect we need to add :hover CSS property for the pagination. Let's see in the example below.

  • HTML
.simple-pagination {
  list-style: none;
  padding: 0;
  margin: 0;
}

.simple-pagination li {
  display: inline-block;
  margin: 0 1px;
}

.simple-pagination li a {
  display: inline-block;
  padding: 10px 15px;
  background: #eebe57;
  color: #020202;
  text-decoration: none;
  transition: all 0.3s ease;
}

.simple-pagination li a:hover {
  background: #da883b;
  margin: 0 2px;
  transition: all 0.3s ease;
}
<ul class="simple-pagination">
  <li><a href="#">&laquo; Prev</a></li>
  <li><a href="#">1</a></li>
  <li><a 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="#">Next &raquo;</a></li>
</ul>
Try it

Output:


Active Pagination

For quick knowledge for the user which page he is on currently, we make the page number representing that web page active on pagination.

To show that this pagination block is active we use a sharp background-color for that section. Let's see an example.

  • HTML
.simple-pagination {
  list-style: none;
  padding: 0;
  margin: 0;
}

.simple-pagination li {
  display: inline-block;
  margin: 0 1px;
}

.simple-pagination li a {
  display: inline-block;
  padding: 10px 15px;
  background: #eebe57;
  color: #020202;
  text-decoration: none;
}

.simple-pagination .active {
  background: #2e2e2e;
  color: #eebe57;
}
<ul class="simple-pagination">
  <li><a href="#">&laquo; Prev</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="active">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="#">Next &raquo;</a></li>
</ul>
Try it

Output:


Centered Pagination

To beautify a web page with pagination it's better if our pagination is in the center of the page.

To align the pagination in the center in a div block you can use many ways. Here we are using the text-align property to align the pagination in the center.

  • HTML
.simple-pagination {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.simple-pagination li {
  display: inline-block;
  margin: 0 1px;
}

.simple-pagination li a {
  display: inline-block;
  padding: 10px 15px;
  background: #eebe57;
  color: #020202;
  text-decoration: none;
}
<ul class="simple-pagination">
  <li><a href="#">&laquo; Prev</a></li>
  <li><a href="#">1</a></li>
  <li><a 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="#">Next &raquo;</a></li>
</ul>
Try it

Output: