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:
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:
OutputUsing 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>
Output:
Output
Similar Reads
How to make a Pagination using HTML and CSS ? Creating pagination is quite simple, you can easily do that by using Bootstrap, and JavaScript. However, in this article, we will use HTML and CSS to create pagination. Pagination is helpful when the website contains lots of content on a single page, and a single page will not look good with all th
3 min read
How to Add Transition on Hover Using CSS? Transitions are the CSS technique used to create smooth changes between property values over a specified duration. By defining a transition, you can animate properties such as color, size, or position, making changes appear gradual rather than abrupt. For hover effects, transitions can enhance user
2 min read
How to create icon hover effect using CSS ? To style an icon's color, size, and shadow using CSS, use the color property to set the icon's color, font size to adjust its size, and text-shadow or box-shadow for adding shadow effects, creating a visually appealing and dynamic look.Using: hover Pseudo-ClassUsing the: hover pseudo-class, you can
2 min read
How to Create a Transition Effect on Hover Pagination using CSS ? 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. ApproachIn this approach, we are going to use CSS transitions. It enables sm
1 min read
How to Change the Size of the Pagination using CSS ? Pagination is an important user interface component that enables navigation through a set of pages. We can customize this element by adjusting its size. These are the two different approaches to customize and change the pagination size using CSS: Table of Content Using font-size PropertyUsing Scalin
3 min read
How to Add Borders to Pagination in CSS ? Add borders to Pagination is when you have many pages of content and must move between them. Making these page buttons look better can make navigating easier and more enjoyable for users. One way to do this is by adding borders to the page buttons using CSS. These are the following approaches: Table
3 min read