Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
141 Views
