How to Add Hoverable Pagination using CSS ?

Last Updated : 21 Mar, 2024

Pagination is a common technique for controlling content that covers multiple pages. Hoverable pagination provides a sleek alternative to traditional pagination styles by enabling users to preview the content without clicking by hovering over the pagination elements. Traditional pagination styles require users to click through numbered links to navigate.

Below are the approaches add hoverable pagination using CSS:

Table of Content

Using CSS transitions
Using CSS Animations

Using CSS transitions

CSS transitions are used to enhance user interaction by gently animating the hover effect on pagination elements. Each link is formatted as a button with rounded corners and transitions its background color smoothly upon hover.

Syntax:

.pagination-item {
  transition: background-color 0.3s ease;
}
.pagination-item:hover {
  background-color: #f0f0f0;
}

Example: This example shows the use of CSS transitions for creating the hoverable pagination.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Hoverable Pagination Example</title>
    <style>
        .pagination-item {
            display: inline-block;
            padding: 15px 20px;
            margin-right: 5px;
            background-color: #e0e0e0;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            text-decoration: none;
        }

        .pagination-item:hover {
            background-color: #87cd54;
        }
    </style>
</head>

<body>
    <h1>Pagination using CSS transitions</h1>
    <div class="pagination">
        <a href="#" class="pagination-item">1</a>
        <a href="#" class="pagination-item">2</a>
        <a href="#" class="pagination-item">3</a>
        <a href="#" class="pagination-item">4</a>
        <a href="#" class="pagination-item">5</a>
        <a href="#" class="pagination-item">6</a>
        <a href="#" class="pagination-item">7</a>
        <a href="#" class="pagination-item">8</a>
        <a href="#" class="pagination-item">9</a>
        <a href="#" class="pagination-item">10</a>
    </div>

</body>

</html>

Output:

Output

Using CSS Animations

In this approach, using CSS animations, pagination links can produce dynamic hover effects that improve user engagement through animated transitions. The pagination links are styled as buttons with rounded corners and smoothly transition their background color upon hover. Additionally, an animation effect is applied to each link, causing them to fade in slowly.

Syntax:

.pagination-item {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Example: This example shows the use of CSS animation for creating the hoverable pagination.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Hoverable Pagination Example</title>
    <style>
        .pagination-item {
            display: inline-block;
            padding: 5px 10px;
            margin-right: 5px;
            background-color: #e0e0e0;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            text-decoration: none;
            animation: fadeIn 0.3s ease;
        }

        .pagination-item:hover {
            background-color: #7b99e6;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <h3>Hoverable Pagination using Animation</h3>
    <div class="pagination">
        <a href="#" class="pagination-item">1</a>
        <a href="#" class="pagination-item">2</a>
        <a href="#" class="pagination-item">3</a>
        <a href="#" class="pagination-item">4</a>
        <a href="#" class="pagination-item">5</a>
        <a href="#" class="pagination-item">6</a>
        <a href="#" class="pagination-item">7</a>
        <a href="#" class="pagination-item">8</a>
        <a href="#" class="pagination-item">9</a>
        <a href="#" class="pagination-item">10</a>
    </div>

</body>

</html>