How to create "next" and "previous" buttons with CSS?

Following is the code to create next and previous buttons with CSS −


 Live Demo

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
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;
<h1>Previous and Next Button Example</h1>
<a href="#" class="back">‹</a>
<a href="#" class="next">›</a>


The above code will produce the following output −