In this tutorial, we are going to see how to make a button link to another page in HTML. There are many ways to make an HTML button that looks like a link (that is, once the user clicks on the link, the user is redirected to another page).
1. Add onclick event on <button> tag
- <!DOCTYPE html>
- <html>
- <head>
- <title>Make a Button Link to Another Page</title>
- </head>
- <body>
- <button onclick=”window.location.href = ‘https://stackhowto.com’;”> Click here </button>
- </body>
- </html>
2. Add onclick event on <input> tag
- <!DOCTYPE html>
- <html>
- <head>
- <title>Make a Button Link to Another Page</title>
- </head>
- <body>
- <input type=”button” onclick=”window.location.href = ‘https://stackhowto.com’;” value=”Click here”/>
- </body>
- </html>
3. Use the form’s action attribute
- <!DOCTYPE html>
- <html>
- <head>
- <title>Make a Button Link to Another Page</title>
- </head>
- <body>
- <form action=”https://stackhowto.com”>
- <button type=”submit”>Click here</button>
- </form>
- </body>
- </html>
4. HTML button that acts as a link using CSS
- <html>
- <head>
- <title>Make a Button Link to Another Page</title>
- <style>
- .button {
- background-color: #1c87c9;
- box-shadow: 0 5px 0 #105cad;
- color: white;
- padding: 1em 1.5em;
- position: relative;
- text-decoration: none;
- display: inline-block;
- }
- </style>
- </head>
- <body>
- <a href=”https://stackhowto.com” class=”button”>Click here</a>
- </body>
- </html>
