Create Button Work Like Link Using Bootstrap or jQuery

Last Updated on January 12, 2021 by Roshan Parihar

In this tutorial, learn how to create a button work like a link using Bootstrap or jQuery. The short answer is to use an anchor tag (<a>) with Bootstrap class .btn to make a button whose working is same as the link.

You can also use the jQuery onclick attribute to make the button work like a link. This opens the link of a button in the same or new tab using jQuery. You have to use the HTML <button> tag together with the onclick event to create a link button.

How to Create Button Work Like Link Using Bootstrap

To create button work like a link, you can use the anchor tag (<a>) link with Bootstrap button class .btn. You can change the appearance of the button using any of the Bootstrap button contextual classes (like .btn-primary). You need to just include the Bootstrap CSS library in the <head> section to start using the Bootstrap button classes. Your button is ready with the link to use on your website.

Test it Live

Output

Visit Bootstrap Tutorial

The above example using the Bootstrap .btn and .btn-primary classes to make the anchor button work like a link.

Put Link On Button Using Onclick Attribute of jQuery

Another method to create a button is by using a jQuery onclick attribute with the <button> element. Here, you have to use the script location.href with the link as its value. You have to use some CSS to add styling to the button.

Test it Live

Output


The above example opens the link in the same tab on click using jQuery. However, if you want to open the link in the new tab using the script, you have to read the below section,

Add Link On Button and Open Link in New Tab with Onclick Attribute

To open the link in a new tab, you have to use the script window.open() in the onclick attribute of the <button> element with the first argument as the URL and the second argument as _blank. See the example given below showing the method:

Test it Live

Output


The above example contains the <button> that opens the link in the new tab. You can change the URL as well as the value of the second argument of the above example as per your requirements.

You may also like to read

I hope you like this tutorial on how to create a button work like a link using Bootstrap and jQuery.

References