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>

Updated on: 17-Nov-2023

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements