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
How to create "next" and "previous" buttons with CSS?
The next and previous buttons are links that are represented like the next and previous page. Also, the role of hover is set on a web page using the :hover selector.
Set the Links for the Next and Previous Buttons
First, set the links using the <a> element and it’s href attribute. Also, set the symbol for the next and previous buttons −
<a href="#" class="back">‹</a> <a href="#" class="next">›</a>
Style the <a> Element
Let us style the links. Remember to set the text-decoration to none. The display is set to inline-block. The display suggests how to control the layout of an element. In this case, the inline-block of the display property displays an element as an inline-level block container −
a {
text-decoration: none;
display: inline-block;
padding: 20px;
font-size: 35px;
width: 40px;
text-align: center;
}
Style the Back Button
We have styled the previous button using the border-radisu −
.back {
border-radius: 50%;
background-color: #acacac;
color: black;
}
Style the Next Button
We have styled the next button using the border-radisu −
.next {
border-radius: 50%;
background-color: rgb(68, 30, 112);
color: white;
}
The Back Button on Hover
On hover, we have set different style for the back button. To achieve this, the :hover selector is used −
.back:hover {
background-color: #ddd;
color: black;
}
The Next Button on Hover
On hover, we have set different styles for the next button. To achieve this, the :hover selector is used −
.next:hover {
background-color: rgb(121, 37, 133);
color: white;
}
Example
The following is the code to create next and previous buttons with CSS −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
a {
text-decoration: none;
display: inline-block;
padding: 20px;
font-size: 35px;
width: 40px;
text-align: center;
}
.back:hover {
background-color: #ddd;
color: black;
}
.next:hover {
background-color: rgb(121, 37, 133);
color: white;
}
.back {
border-radius: 50%;
background-color: #acacac;
color: black;
}
.next {
border-radius: 50%;
background-color: rgb(68, 30, 112);
color: white;
}
</style>
</head>
<body>
<h1>Previous and Next Button Example</h1>
<a href="#" class="back">‹</a>
<a href="#" class="next">›</a>
</body>
</html>
3K+ Views
