How to Create a Transition Effect on Hover Pagination using CSS ?

Last Updated : 04 Apr, 2024

In web development, pagination is a common feature used to navigate through a large set of data or content. Adding a transition effect on hover to pagination buttons can enhance user interaction and provide visual feedback.

Approach

In this approach, we are going to use CSS transitions. It enables smooth changes in CSS property values over a specified duration. By applying transitions to pagination buttons’ properties like background color or text color, we can create a subtle hover effect.

Syntax:

.pagination-button {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pagination-button:hover {
  background-color: #333;
  color: #fff;
}

Example: This example shows the use of transition property in CSS.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Pagination with Transition Effect</title>
    <style>
        .pagination {
            margin: 20px auto;
            text-align: center;
        }

        .page {
            display: inline-block;
            padding: 5px 10px;
            margin: 0 5px;
            background-color: #f4f4f4;
            color: #333;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .page:hover {
            background-color: #f57f7f;
        }
    </style>
</head>

<body>
    <div class="pagination">
        <a href="#" class="page">1</a>
        <a href="#" class="page">2</a>
        <a href="#" class="page">3</a>
        <a href="#" class="page">4</a>
        <a href="#" class="page">5</a>
    </div>
</body>

</html>