Add hoverable pagination with CSS


Pagination is used to separate the given document into pages and assigns numbers. It makes easier to navigate through a lot of content by separating various entries or web content into separate pages, which makes content switching easy. Pagination enabled web links let users to scroll over your content. One effective technique for indexing on the home page of different website pages is CSS pagination. You need to implement pagination for every page on your website if it has a lot of them. hoverable pagination is nothing, but it gets hover when the user moves the mouse over pagination.

There are different types of the pagination available in the CSS, some of them are listed below −

  • Simple pagination

  • Bordered pagination

  • Active and hoverable pagination

  • Pagination with round and hoverable buttons

Creating Pagination Using CSS

A pagination is a sequence of numbers that appear at the bottom of a page. When using pagination, there could also be previous and next buttons. Use the display: inline-block property since the page numbers are shown horizontally on the screen. The page link is contained in the pagination, therefore to remove the links default underlining, use text-decoration:none. The links can now have padding and a background color added. Additionally the :hover effect to the pagination links as well.

For a better understanding of adding hoverable pagination with CSS, let's look into the following examples −

Example

Let's look at the following example, where we are going to create an active and hoverable page with CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      .tp a {
         font-size: 20px;
         float: left;
         padding: 15px 16px;
         text-decoration: none;
      }
      .tp a.active {
         background-color: #ABEBC6;
      }
      .tp a:hover:not(.active) {
         background-color: #E8DAEF;
      }
   </style>
</head>
<body style="background-color:#E5E8E8">
   <div class="tp">
      <a href="#">«</a>
      <a href="#">1</a>
      <a href="#">2</a>
      <a class="active" href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">»</a>
   </div>
</body>
</html>

When we run the above code, it will generate an output consisting of the pagination applied with CSS displayed on the webpage.

Example

Considering another example, we are going to create a round and hoverable pagination with a list and use CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      .pagination li {
         display: inline;
      }
      .pagination li a {
         color: #DE3163;
         font-size: 20px;
         float: left;
         padding: 10px 20px;
         text-decoration: none;
         border-radius: 7px;
      }
      ul.pagination li a.active {
         background-color: #E8DAEF;
         color: #212F3D;
      }
      ul.pagination li a:hover:not(.active) {
         background-color: #FADBD8;
      }
   </style>
</head>
<body style="background-color:#D6EAF8">
   <ul class="pagination">
      <li>
         <a href="#">«</a>
      </li>
      <li>
         <a href="#">1</a>
      </li>
      <li>
         <a href="#">2</a>
      </li>
      <li>
         <a href="#">3</a>
      </li>
      <li>
         <a class="active" href="#">4</a>
      </li>
      <li>
         <a href="#">»</a>
      </li>
   </ul>
</body>
</html>

On running the above code, the output window will pop up, displaying the pagination applied with CSS on the webpage.

Example

In the following example, we are going to create a bordered pagination using CSS

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
         font-family: verdana;
         background-color: #EAFAF1;
      }
      ul.tp {
         display: inline-block;
         padding: 0;
      }
      ul.tp li {
         display: inline;
      }
      ul.tp li a {
         float: left;
         padding: 10px 18px;
         text-decoration: none;
         border: 1.2px solid #7D3C98;
      }
      ul.tp li a.active {
         background-color: #DE3163;
         color: #1C2833;
         border: 1.2px solid #7D3C98;
      }
      ul.tp li a:hover:not(.active) {
         background-color: #D6EAF8;
      }
   </style>
</head>
<body>
   <h2>Bordered Pagination</h2>
   <ul class="tp">
      <li>
         <a href="#">«</a>
      </li>
      <li>
         <a href="#">1</a>
      </li>
      <li>
         <a href="#">2</a>
      </li>
      <li>
         <a class="active" href="#">3</a>
      </li>
      <li>
         <a href="#">4</a>
      </li>
      <li>
         <a href="#">»</a>
      </li>
   </ul>
</body>
</html>

When we run the above code, it will generate an output consisting of the text and bodered pagination displayed at the center of the webpage.

Updated on: 08-Jan-2024

176 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements