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.
<a href="https://tutorialdeep.com/bootstrap/" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Visit Bootstrap Tutorial</a>
The above example using the Bootstrap
.btn-primary classes. These classes in combination create a link button.
Put Link On Button Using Onclick Attribute
location.href with the link as its value. You can also use some Bootstrap button classes to add some button styling.
<button type="button" onclick="location.href = 'https://tutorialdeep.com/jquery/';">Visit jQuery Tutorial</button>
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.
<button type="button" onclick="window.open('https://tutorialdeep.com/sql/', '_blank');">Visit SQL Tutorial</button>
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
- How to Left Align and Right Align Button Using Bootstrap
- Create Anchor Link Button Using Bootstrap
- Increase/Decrease Size of Button Using Bootstrap
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.
- Bootstrap Official Doc on Button tags
- Stackoverflow Discussion on How to make a button in Bootstrap look like a normal link in nav-tabs?
- Tutorialspoint Tutorial on Creating a button look like a link with Bootstrap
Also tell me, which method you are using to put a link on a button element.