HTML Tutorials

How To Make A Button Link To Another Page In HTML

by

Do you want to create a button in HTML that will link it to another page or website you want? This article will discuss how to make a button link to another page in HTML in various ways.

You can achieve this by various methods, either by using HTML only or using CSS, or using JavaScript. I will also discuss which method to use and which you should not use in your web development project.

In HTML we have a button element that you can use to create the Button on the webpage. And then either with help of a href element or with the use of CSS you can create the link to that button and hence it will act as a button that links it to some other pages.

Let us see in the below example code the usage of button element and a href.

<!-- HTML Code -->
<button>
  <a href = "https://www.google.com">
    Click Here
  </a>
</button>

As you can see we have created a Link named Click Here with a redirect to Google.com and embedded that link to the Button name.

But this method is not recommended use since it is not best practice to use the nested HTML elements to do any task.

Make Link To Another Page using Button Element in HTML (Recommended)

Let us see in the below code example the usage of Button Element and how you can use the onClick feature of button element in HTML that will let you link the button to another page.

<!-- HTML Code -->
<button onClick="location.href='https://www.google.com'" type="button">Click Here</button>

As you saw in the above code the onClick method is used inside the button element that provides the link and also makes sure that you use the link with “location.href =” and with the location to want to reach once the button is clicked.

This will only work when the type is set to a button. And it may not work if the type is missing or mentioned sometime else.

You can make a Button Link in HTML in the most proper way is using the HTML Form element. Simply embedding it in a <form> and specifying the desired target URL in the action element is the most straightforward method.

Let us see in the below code example to understand the usage of the Form element in HTML.

<!-- HTML Code -->
<form action="https://codepen.io">
    <input type="submit" value="Click Here" />
</form>

The above code will create a Button with the label Click Here and then click on the button it will redirect you to another page on codepen.io. Though you can use any URL you want to reach once the button is clicked.

How To Make A Button Link To Another Page In HTML

Wrap Up

I hope you were able to create a link using a Button from the above tutorial in HTML. You can also use the JavaScript and CSS methods. But CSS method to create a link does not work in all browsers. And the question does not talk about Button to be created in JavaScript.

Let me know if you like my post related to GitBot the GitHub Productive Tool. Then please follow us on Facebook and Twitter. Let us know the questions and answer you want to cover in this blog.

Further Read:

  1. How To Calculate Time Complexity And Big O Of Algorithm
  2. Quick Fix: zsh Command Not Found
  3. What is prevNext and How it Works Complete Guide
  4. Best Udemy JavaScript Course 2021 [Comprehensive Guide]
  5. What should be entered at a command prompt in order to scan all system files?
  6. What is LeetCode and Its Importance To SE
  7. Is it Worth Doing Google UX Certification

Leave a Comment