Creating a linkable HTML Button

Creating Linkable HTML Button

This article is a detailed tutorial on how you can create a linkable HTML button using different available techniques. Illustrative Examples are given.

Creating a linkable HTML Button

Websites are full of links. You might be wanted to link to some other page or website within your website’s content. Similarly, there might be a need to create an HTML button such that clicking on that button must take you to the desired link. That’s what we’re going to find out how you can create such an HTML button that will take you to the desired URL.

Well, there are multiple ways, how you can make a button to redirect your visitors to the desired URL. Here, I’ve tried to cover all of the ways that you can follow to achieve so.

Using Anchor Tag around the Button tag

The simplest option is to use an anchor tag (<a>) around the button tag (<button>). Given below is an example illustrating this.

HTML Code.

Output.

Note. Here you may also need to give proper styling classes to the anchor tag or maybe the button tag as well.

Using HTML Form Tags

You can also create a small HTML form with only a single input field submit button to redirect to some other URL when the button is clicked. The code for the same is given below.

HTML Code.

Here also you can specify the attribute target="_blank" in the form tag to let the required link be opened in a new tab when the button will be clicked.

Output.

Another way is to use the HTML5 supported formation attribute directly within the button tag placed inside the form tag as demonstrated below.

Output.

Using onclick attribute in the button tag

You can use the attribute onlick within the button tag to further use the Javascript property location.href to change the location of the current page to the desired URL. But for this method to work, JavaScript should be enabled in the web browser.

HTML Code.

It will open the link in the same tab.

Output.

Using JavaScript’s window.open() method

Using the attribute onclick within the button tag will open the link in the same tab while using the JavaScript’s window.open() method may help you to open the link in a new tab when the button will be clicked as illustrated in the following example.

HTML Code.

You can skip providing the second argument '_blank' to the window.open() method to avoid opening the link in a new tab.

Output.

I hope you found this guide useful. If so, do share it with others who are willing to learn about Web Development and other technologies. If you have any questions related to this article, feel free to ask us in the comments section.

And do not forget to subscribe to WTMatter!

Subscribe To WTMatter!

Receive updates of our latest articles via email. Enter your email address below to get started.

Leave a Reply

Your email address will not be published. Required fields are marked *