Bootstrap 5 Buttons Button tags

Last Updated : 08 Nov, 2022

Bootstrap 5 Buttons Button tags are used to create buttons using <a>, <button>, and <input> elements. To design the button tags, we will use .btn class. After applying the .btn class on <a>, <button>, and <input> elements, browsers can render the elements in slightly different styles.

Button tags used Class:

.btn: This class is used to display the button tag after applying on <a>, <button>, and <input> elements.

Syntax:

<a class="btn btn-*" href="#" role="button">
    Button
</a>

<button class="btn btn-*" type="submit">
    Button
</button>

<input class="btn btn-*" type="button" value="Button">

Example 1: In this example, we will create button tags after applying .btn class on <a>, <button>, and <input> elements.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5 Buttons Button tags</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <div class="container mt-3"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Buttons Button tags</h2> 
  
        <a href="#" class="btn btn-success" 
            role="button"> 
            GeeksforGeeks 
        </a> 
  
        <button class="btn btn-success" type="submit"> 
            HTML 
        </button> 
          
        <input class="btn btn-success" 
            type="button" value="CSS"> 
        <input class="btn btn-success" 
            type="submit" value="JavaScript"> 
        <input class="btn btn-success" 
            type="reset" value="Bootstrap"> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will create outline button tags after applying .btn class on <a>, <button>, and <input> elements.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5 Buttons Button tags</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <div class="container mt-3"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Buttons Button tags</h2> 
  
        <a href="#" class="btn btn-outline-success" 
            role="button"> 
            GeeksforGeeks 
        </a> 
  
        <button class="btn btn-outline-success" type="submit"> 
            HTML 
        </button> 
          
        <input class="btn btn-outline-success" 
            type="button" value="CSS"> 
        <input class="btn btn-outline-success" 
            type="submit" value="JavaScript"> 
        <input class="btn btn-outline-success" 
            type="reset" value="Bootstrap"> 
    </div> 
</body> 
  
</html>