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.
How To Create a Button that acts like a Link using Button Element (Not Recommended)
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.
<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 to 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.
<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.
Make Link Using Form In HTML
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.
<form action="https://codepen.io"> <input type="submit" value="Click Here" /> </form>
The above code will create a Button with the label as 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 Calculate Time Complexity And Big O Of Algorithm
- Quick Fix: zsh Command Not Found
- What is prevNext and How it Works Complete Guide
- What should be entered at a command prompt in order to scan all system files?
- What is LeetCode and Its Importance To SE
- Is it Worth Doing Google UX Certification