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.
|
1 |
<a href="https://tutorialdeep.com/bootstrap/" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Visit Bootstrap Tutorial</a> |
Output
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.
|
1 |
<button type="button" onclick="location.href = 'https://tutorialdeep.com/jquery/';">Visit jQuery Tutorial</button> |
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:
|
1 |
<button type="button" onclick="window.open('https://tutorialdeep.com/sql/', '_blank');">Visit SQL Tutorial</button> |
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
- How to Left Align and Right Align Button Using Bootstrap
- Create Anchor Link Button Using Bootstrap
- Increase/Decrease Size of Button Using Bootstrap
I hope you like this tutorial on how to create a button work like a link using Bootstrap and jQuery.
References