LAST UPDATED: AUGUST 5, 2021
How to create previous and next button using CSS?
The previous and next buttons are used for navigation between the pages in the websites. The CSS properties can be used to customize the previous and next buttons that look more nice and attractive.
CSS for Previous and Next button
A set of CSS properties can be used to decorate the Previous and Next buttons in the CSS. The <a> tag can be used to create the Previous Next buttons. Use margin and padding to create extra spaces for the buttons and background-color to add color to the background of the button.
Example: Create Previous and Next buttons
Here is a code example to create previous and next buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
a {
text-decoration: none;
display: inline-block;
padding: 10px 16px;
font-size: 15px;
}
a:hover {
background-color: #CCCCCC;
color: blue;
}
.previous {
background-color: cyan;
color: blue;
}
.next {
background-color: cyan;
color: blue;
}
.round {
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Customize Previous and Next buttons</h1>
<a href="#" class="previous">« Previous</a>
<a href="#" class="next">Next »</a>
</body>
</html>
Output
Here is the output of the above program.
Example: Create the previous next button
We can use hex code to add the symbol to the previous next button.
Conclusion
We can create a Previous Next button and customize it using CSS properties. We can use color, background color, font size, etc to customize it.
