Last Updated on July 16, 2021 by Roshan Parihar
In this tutorial, learn how to create an anchor link button with Bootstrap. The short answer is: use the anchor element (<a>) and add the Bootstrap class .btn in combination with the Bootstrap button contextual classes (like .btn-primary).
By default, the buttons element do not contain a link to redirect to the web page. However, create an anchor link button requires more CSS to apply on it and get a <button> like structure. But, Bootstrap provides many useful classes to easily convert anchor links to a button-like appearance.
Let’s find out with the example below showing the ahref links using the Bootstrap classes.
How to Create Anchor Link Button Using Bootstrap?
To create an anchor link button, you can have to use the <a> element. After that, add the Bootstrap class .btn in combination with the .btn-primary. The second class is a Bootstrap contextual class that is useful to add look and feel to the anchor link button.
|
1 |
<a href="https://tutorialdeep.com/bootstrap/bootstrap-button/" class="btn btn-primary">Bootstrap Button</a> |
Output
Click the above button and it will redirect you to the other page location. This is useful when you want your button not to submit a form and instead of this, it will redirect to the other website pages or other pages.
Add Onclick Attribute Using jQuery
In addition to the above method, you can also create a button using the <button> and add the link to the button using onclick = "window.open()" attribute.
The window.open() takes two comma-separated arguments in which the first can be the URL and the second can be _blank. This can be useful to open the URL in the new tab as given below:
|
1 |
<button type="button" onclick="window.open('https://tutorialdeep.com/bootstrap/bootstrap-button/', '_blank');" class="btn btn-primary">Visit SQL Tutorial</button> |
Output
The above example uses jQuery to add a URL to the button element. You can click the button that opens the URL to the new tab of the browser. The Bootstrap class .btn and contextual classes (like .btn-primary) can also be used here to change the appearance of the button.
The above two methods can be useful for you to create your own button with anchor links.
DOWNLOAD Free Bootstrap CHEAT SHEET
You May Also Like to Read