How to Create Link in HTML Button

1. Use the <a> and <button> Tags to Create a Button That Acts as a Link in HTML
2. Use the onclick Attribute in the button Tag to Create a Button That Acts as a Link in HTML
3. Use the <a> and <input> Tags to Create a Button That Acts as a Link in HTML
4. Use an HTML Form to Create a Button That Acts as a Link in HTML

We will illustrate methods to create an HTML button that acts as a link.

Use the <a> and <button> Tags to Create a Button That Acts as a Link in HTML

We can create an HTML button by using the <button> tag. The <button> tag defines a clickable button. We use the anchor tag <a> to create a hyperlink. It links one page to another page. We can create a button that acts as a link by nesting the <button> tag inside the anchor tag. We can specify the address of the link through the href attribute.

For example, create an anchor element inside the HTML body. Inside the anchor element, write the href attribute and specify the URL https://www.youtube.com. After that, create the button using the <button> tag. Inside the <button> tag, write the text Youtube. Now, close the button tag followed by the anchor tag.

The example below shows the process of the creation of an HTML button that acts as a link. It will create a button that will redirect to Youtube.

Example Code:

<a href="https://www.youtube.com">
<button>Youtube</button>
</a> 

Use the onclick Attribute in the button Tag to Create a Button That Acts as a Link in HTML

We can also use the onclick attribute inside the button tag to create a button that acts as a link in HTML. This attribute fires on a mouse click on the element. The script runs when the mouse is clicked. However, in this process, we first create the button, then only add our desired URL. We also will be using a little bit of JavaScript in this method. We will use the window.location object to get the current page address and redirect it to a new page.

For example, inside the HTML body, create a <button> tag at first. Inside the button tag, use the onclick attribute and set it to window.location.href. Next, specify the destination URL https://www.facebook.com/ with window.location.href. Then, write the text Facebook between the <button> tag.

We have used the onclick attribute which is a part of the event attribute in HTML. In this way, we can create an HTML button that acts as a link.

Example Code:

<button onclick="window.location.href='https://www.facebook.com/'">Facebook</button>

Use the <a> and <input> Tags to Create a Button That Acts as a Link in HTML

We can use the <input> tag to create an HTML button. The <input> tag is also an <form> tag element. It specifies an input field where the user can enter data. We can create a button using the type attribute and specifying it with the value button. We can use the value attribute to write the content of the button. Then, we can use the anchor tag to wrap the <input> tag. Then, a button that acts as a link is formed.

For example, write an anchor tag specify the destination URL inside it via the href attribute. Write the URL as https://www.facebook.com/. Then, write the <input> tag and specify its type attribute as button. Then, specify the text Facebook in the value attribute. Close the anchor tag.

The example below creates a button with the name Facebook in it. It redirects to Facebook when clicked. Thus, we can create a button that acts as a link.

Example Code:

<a href="https://www.facebook.com/">
<input type="button" value="Facebook">
</a>

Use an HTML Form to Create a Button That Acts as a Link in HTML

In this method, we will use the <form> tag to create a button that acts as a link. We use the action attribute to specify the destination URL. The method attribute instructs how to send the form data. The form is delivered to the page specified in the action attribute. We can set the button type to submit as it submits the form data.

For example, inside the HTML body, create the <form> tag and use get for the method attribute. Now, specify your desired URL inside the action attribute. Then, create the button using the <button> element and set the type attribute to submit. Then, specify the text you want on your button. Then, close the <button> tag followed by the <form> tag. Then, close all the remaining tags opened above.

Example Code:

<form method="get" action="https://www.youtube.com/">
<button type="submit">Continue</button>
</form>