How to Create Button Work Like Link Using Bootstrap

In this tutorial, learn how to create button work like link using Bootstrap. The short answer is to use an anchor tag with Bootstrap classes or onclick attribute with jQuery.

Put a link on the button and open the link in the same tab or new tab using the onclick attribute. You have to use HTML anchor tag when using Bootstrap for creating button work like link. However, you can use the HTML button tag together with the onclick event to create a link button.

Create Button Work Like Link With Anchor Tag Using Bootstrap

To create button work like link, you can use anchor link with Bootstrap button classes. This is the simple method to create a button using Bootstrap.

Just include Bootstrap library file and add button classes. Your button is ready with the link to use on your website.

Output

Visit Bootstrap Tutorial

The above example using the Bootstrap .btn and .btn-primary classes. These classes in combination create a link button.

Put Link On Button Using Onclick Attribute

Another method to create button is by using HTML onclick attribute with jQuery or Javascript. Here, you have to use the script location.href with the link as its value. You can also use some Bootstrap button classes to add some button styling.

Output


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

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

You have to use the script window.open() in the onclick event. The first argument of the script is the link and the second is the target attribute of HTML.

To open the link in the new tab, you have to add _blank as the value of the second argument.

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.

You may also like to read

Hope, you like this tutorial on how to create button work like link using Bootstrap. If you have any query regarding the tutorial, please comment below.

References

Also tell me, which method you are using to put a link on a button element.

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.