Create Button Like a Link with Bootstrap 5
Last Updated :
07 Feb, 2024
Bootstrap 5 has various classes that can be used to create different elements with highly customizable styling. By using Bootstrap Classes, we can create a button that looks similar to the link. In this article, we will create a button that looks like a link with Bootstrap 5 classes. We will explore two different approaches with their Syntax, and practical implementation in terms of example and output demonstration.
Using btn and btn-link Classes
In this approach, we are using the Bootstrap 5 classes of btn and btn-link to create a button that looks like a link. When the user clicks on the button, the alert shows the message “The Button is Clicked“. Using these classes, we can create link-based buttons that look like actual links rather than a simple button.
Syntax:
<button class="btn btn-link">Click me</button>
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using btn and btn-link Classes</title>
<link href=
rel="stylesheet">
</head>
<body class="bg-light">
<div class="container mt-5">
<h1 class="text-success">
GeeksforGeeks
</h1>
<div class="alert alert-info" role="alert">
<h3 class="mb-3">
Approach 1: Using btn and btn-link classes
</h3>
<button class="btn btn-link"
onclick="alert('The Button is Clicked')">
Click me
</button>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Using btn and text-decoration-none Classes
In this apporach, we are using the btn anf text-decoration-none class. The text-decoration-none class removes all the button styling properties and makes it look like a normal link. When the user clicks on th button, a message is been shown which is specified in alert box.
Syntax:
<button class="btn text-decoration-none">
Click me
</button>
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using btn and text-decoration-none Classes 2</title>
<link href=
</head>
<body class="bg-light">
<div class="container mt-5">
<h1 class="text-success">
GeeksforGeeks
</h1>
<div class="alert alert-primary"
role="alert">
<h3 class="mb-3">
Using btn and text-decoration-none Classes
</h3>
<p class="lead">
Unlock GFG Premium membership. Limited time offer!
</p>
<button class="btn text-decoration: underline"
onclick="alert('Claim Your Offer')">
Claim Now
</button>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...