Create previous and next buttons in HTML & CSS

The previous and next buttons are used for navigating from one page to another in a website. These buttons help visitors to easily find similar content on our website.

There are several methods that we can use to create previous and next buttons in HTML & CSS. However, the easiest way to create these previous and next buttons is by using HTML symbol entities.

In this example, we will design CSS links just like a normal button.

Add the below HTML code:

Example:

<div>
    <a href="#">&laquo; Previous</a>
    <a href="#">Next &raquo;</a>
</div>

<div>
    <a href="#">&#8249;</a>
    <a href="#">&#8250;</a> 
</div>

<div>
    <a href="#">&#8592; Previous</a>
    <a href="#">Next &rarr;</a>
</div>

Add the below CSS:

Example:

a{
   text-decoration: none;
   color: white;
   background: #dc3545;
   padding: 7px 10px;
   border-radius: 4px;  
   font-size: 19px;
}
a:hover{
   background: rgb(220 53 69 / 85%);
}
a:focus{
    outline: 3px solid rgb(220 53 69 / 50%);
   
}
div{
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
}

Note: When you are putting these previous and next buttons in your website, replace # with the link that you want the visitor to navigate to.