How to Turn a Button into a Link in HTML

John on January 13, 2021

To make an HTML button take the user to a new page when clicked, we can put it in a form and set the form action to the destination page.

<form action="https://www.skillsugar.com/">
  <button>Visit Skillsugar</button>
</form>

You can also use relative links to pages on the same domain:

<form action="/foo">
  <button>Visit Skillsugar</button>
</form>

Another approach is to use an anchor element and style it to look like a button. We can do this using class attributes.

<a href="https://www.skillsugar.com/" class="btn btn-success">Visit Skillsugar</a>

.btn {
   display: inline-block;
   font-weight: 400;
   text-decoration: none;
   text-align: center;
   vertical-align: middle;
   touch-action: manipulation;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 50px;
   white-space: nowrap;
   padding: 9px 15px;
   font-size: 1em;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   transition: all .5s;
}

.btn-success {
   background-color: #bcf5bc;
   border-color: #bcf5bc;
   color: #006400;
}

.btn-success:active, .btn-success:active:focus, .btn-success:focus, .btn-success:hover {
   background-color: #7cdd77;
   border-color: #006400;
   color: #006400;
}

Conclusion

You now know how to make an HTML button behave like an anchor. If possible, you should always use anchor links to take users to new pages, especially if they are part of the website structure as search engines may not follow buttons.