Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    button {
     padding:15px;
     border-radius:12px;
     margin:1px;
     border:none;
     font-size:1.5em;
     cursor:pointer;
     background:#24890D;
     display:inline-block;
    }
     
    a { 
     text-decoration:none;
     color:Black;
     width:100%;
    }
    
    button:hover { 
     background:#66BA69;
     color:black;
    }
     
    i {
     color:white;
    }
    .next {
      float:right;
    }
    </style>
  </head>
  <body>
    <h3>Example for Button Icons</h3>
    <button><a href="#"><i class="fa fa-caret-left" aria-hidden="true"></i>
     Prev</a></button>
    <button class="next"><a href="#">Next <i class="fa fa-caret-right" aria-hidden="true"></i>
</a></button>
  </body>
</html>
​