Linking A Button To A Page in HTML: Here’s How?

Board Infinity -

Introduction

You've written some great content, but you want to link it to another page. You don't want to use a link tag or have to type in the URL manually each time. You also don't want anything fancy or complicated—just a button that takes users directly to the target page. Here's how to make a button link to another page in html

Linking A Button To Another Page

To create a link to another page, use the form tags to create an html button with a link. In the form's action attribute, write the file path where your link will be located. When someone clicks on the Submit button, they will be redirected to that page.

<html>
  <head>
    <title>Video in HTML</title>
  </head>
   
  <body>
   
    <form method="POST" action="myPage.php">
      <input type="submit"/>
    </form>
   
  </body>   
</html>

Output:

write your code here: Coding Playground

The submit button can be linked using the anchor tag. This is easy and reliable. You just have to write or declare your submit button between the starting and closing tags of the anchor tag. By using the href attribute of that element, you can tell where you want to link your submit href on button.

<html>   
  <body>
   
    <a href="http://google.com">
      <input type="submit"/>
    </a>
   
  </body>   
</html>

write your code here: Coding Playground

Linking Button To a Page Using Javascript

To link a button to a different page in HTML, we can use JavaScript. In JavaScript, we design a function that will manage all the data like the page path where we want to connect our submit button.

The function name is represented by an underscore ( _ ) followed by a space and then a word describing what the function does. For example, if you submit button redirects users from one page to another by clicking on it, then you would name your function as _redirectSubmit .

Within this function, you would call another function that redirects users away from your original page.

<html>   
  <body>
   
    <input type="submit" onClick="myFunction()"/>
    <script>
      function myFunction() {
        window.location.href="http://Google.com";
      }
    </script>
   
  </body>   
</html>

Output:

write your code here: Coding Playground

Conclusion

Making a submit button link to another website is quite a simple task as you see above. It can be very useful when you are trying to redirect your website visitors to some external resource or another platform. We hope you found this guide helpful in knowing more about the topic.