Home About us

How to link button to a page in HTML

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Make a Button Link to Another Page</title>
  5. </head>
  6. <body>
  7. <button onclick="window.location.href = 'https://stackhowto.com';"> Click here </button>
  8. </body>
  9. </html>

2. Add onclick event on <input> tag

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Make a Button Link to Another Page</title>
  5. </head>
  6. <body>
  7. <input type="button" onclick="window.location.href = 'https://stackhowto.com';" value="Click here"/>
  8. </body>
  9. </html>

3. Use the form’s action attribute

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Make a Button Link to Another Page</title>
  5. </head>
  6. <body>
  7. <form action="https://stackhowto.com">
  8. <button type="submit">Click here</button>
  9. </form>
  10. </body>
  11. </html>

4. HTML button that acts as a link using CSS

    <!DOCTYPE html>
  1. <html>
  2. <head>
  3. <title>Make a Button Link to Another Page</title>
  4. <style>
  5. .button {
  6. background-color: #1c87c9;
  7. box-shadow: 0 5px 0 #105cad;
  8. color: white;
  9. padding: 1em 1.5em;
  10. position: relative;
  11. text-decoration: none;
  12. display: inline-block;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <a href="https://stackhowto.com" class="button">Click here</a>
  18. </body>
  19. </html>

Related Posts