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:


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

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

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

Add the below CSS:


   text-decoration: none;
   color: white;
   background: #dc3545;
   padding: 7px 10px;
   border-radius: 4px;  
   font-size: 19px;
   background: rgb(220 53 69 / 85%);
    outline: 3px solid rgb(220 53 69 / 50%);
   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.


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.