CSS Pagination with examples

In this tutorial, we will learn about “CSS Pagination”.  Heard about it for the first time, but don’t worry you must have seen it almost all the time. Whenever you search something on google, you encounter a number of results. Because of a large number of results, they usually don’t fit on a single page. This is where CSS Pagination comes into play, which redirects you to results for the same query on other pages. Below shows common pagination :

CSS Pagination with examples

Some common CSS Pagination

We usually come across with a number of pagination, some important of which are mentioned below.

Now let’s try some of the above mentioned pagination.

  •  Simple Pagination: As the name suggests, the simplest type of pagination. In this, you just have numbers, on which you click to go to that page. The HTML and CSS code for the same is shown below. Note that in the HTML code below in the 3rd line, href=”pagination.css”  is the name stylesheet(CSS file) linked to it.
<html>
<head>
<link type="text/css" rel="stylesheet" href="pagination.css">
</head>
<body>
<h2>Simple Pagination</h2>
<div class="pagination">
  <a href="#">&laquo;</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="#">&raquo;</a>
</div>
</body>
</html>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

And the pagination will look something like shown below.

pagination

  • Active and Hoverable Pagination: In this pagination, when you hover over numbers, you get to know which is option is active. In other words, you will be directed to the active page. To change Simple Pagination to Active and Hoverable Pagination, just add the given code to CSS stylesheet.
.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

And the pagination will look something like shown below.

Active and Hoverable Pagination:

  • Rounded Active and Hoverable Buttons: We just add border-radius: 8px; to “.pagination a” and “.pagination a.active”. Or you can even add the given code simply to your stylesheet.
.pagination a {
  border-radius: 8px;
}

.pagination a.active {
  border-radius: 8px;
}

And the pagination will look something like shown below.

Rounded Active and Hoverable Buttons:

  • Hoverable Transition Effect: We just add transition: background-color .4s; to “.pagination a” as shown below.
.pagination a {
  transition: background-color .4s;
}

And the pagination will look something like the same as above, with just the Transition effect.

Also read: Add Neon Effect using CSS

Leave a Reply

Your email address will not be published. Required fields are marked *