Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Next and Previous Buttons with CSS
To create "next" and "previous" buttons with CSS is a common requirement for web pages, especially for multi-paged content as it eases the navigation through various pages. In this article, we'll be understanding how to create "next" and "previous" buttons with CSS.
We are having two anchor tags in our HTML document, our task is to design these two anchor tags to create "previous" and "next" buttons using CSS.
Creating 'next' and 'previous' Buttons With CSS
- We have used two anchor tags to represents previous and next buttons.
- We have used button class to design the apearence of both buttons using background-color, color for text color, set their border and making curved corner using border-radiusproperty.
- We have set the padding for buttons, set their display property and set it's text-decoration property to none which removes the underlining of text.
- Then we have set different property upon hovering on buttons using hover psuedo-class.
Example
Here is a complete example code implementing above mentioned steps to create next and previous buttons with CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Creating next and previous Buttons With CSS
</title>
<style>
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: white;
color: #031926;
border: 2px solid #031926;
}
.button {
background-color: #031926;
color: white;
border: 2px solid #031926;
border-radius: 10%;
}
</style>
</head>
<body>
<h3>
To Create "next" and "previous" Buttons With CSS
</h3>
<p>
</p>
<a href="#" class="button">‹ Previous</a>
<a href="#" class="button">Next ›</a>
</body>
</html>
Conclusion
In this article, we have understood how to create "next" and "previous" buttons with CSS. It is a straightforward task which can be achieved by using basic CSS properties such as background-color and border. We have used hover effect for interactivity.
5K+ Views
