Bootstrap 5 Buttons Examples

Uncategorized / Leave a Comment

Bootstrap 5 buttons examples with different styles and color combinations for your form, dialogs, and more. Get Bootstrap buttons in many variations like button size, color, outline border, disabled, and input tag buttons.

These buttons are designed by using the bootstrap button classes, which are described below as examples.

The button classes can be applied on “a”, “button”, or “input” tags to make the more attractive button.

HTML

<!-- Primary Button Styles -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Secondary Button Styles -->
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- Success Button Styles -->
<button type="button" class="btn btn-success">Success</button>

<!-- Info Button Styles -->
<button type="button" class="btn btn-info">Info</button>

<!-- Warning Button Styles -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Danger Button Styles -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Dark Button Styles -->
<button type="button" class="btn btn-dark">Dark</button>

<!-- Light Button Styles -->
<button type="button" class="btn btn-light">Light</button>

<!-- Link Button Styles -->
<button type="button" class="btn btn-link">Link</button>


<!--Primary Buttons HTML-->

<!-- Solid Button -->
<button type="button" class="btn btn-primary">Solid Button</button>

<!-- Disabled Button -->
<button type="button" class="btn btn-primary" disabled>Disabled Button</button>

<!-- Small Button -->
<button type="button" class="btn btn-primary btn-sm">Small Button</button>

<!-- Large Button -->
<button type="button" class="btn btn-primary btn-lg">Large Button</button>

<!-- Outline Button -->
<button type="button" class="btn btn-outline-primary">Outline Button</button>

<!-- Button by using Input tag -->
<input class="btn btn-primary" type="button" value="Input Tag Button">
    
    
<!--Secondary Buttons HTML-->

<!-- Solid Button -->
<button type="button" class="btn btn-secondary">Solid Button</button>

<!-- Disabled Button -->
<button type="button" class="btn btn-secondary" disabled>Disabled Button</button>

<!-- Small Button -->
<button type="button" class="btn btn-secondary btn-sm">Small Button</button>

<!-- Large Button -->
<button type="button" class="btn btn-secondary btn-lg">Large Button</button>

<!-- Outline Button -->
<button type="button" class="btn btn-outline-secondary">Outline Button</button>

<!-- Button by using Input tag -->
<input class="btn btn-secondary" type="button" value="Input Tag Button">
    
    
<!--Success Buttons HTML-->

<!-- Solid Button -->
<button type="button" class="btn btn-success">Solid Button</button>

<!-- Disabled Button -->
<button type="button" class="btn btn-success" disabled>Disabled Button</button>

<!-- Small Button -->
<button type="button" class="btn btn-success btn-sm">Small Button</button>

<!-- Large Button -->
<button type="button" class="btn btn-success btn-lg">Large Button</button>

<!-- Outline Button -->
<button type="button" class="btn btn-outline-success">Outline Button</button>

<!-- Button by using Input tag -->
<input class="btn btn-success" type="button" value="Input Tag Button">
    
<!--Danger Buttons HTML-->

<!-- Solid Button -->
<button type="button" class="btn btn-danger">Solid Button</button>

<!-- Disabled Button -->
<button type="button" class="btn btn-danger" disabled>Disabled Button</button>

<!-- Small Button -->
<button type="button" class="btn btn-danger btn-sm">Small Button</button>

<!-- Large Button -->
<button type="button" class="btn btn-danger btn-lg">Large Button</button>

<!-- Outline Button -->
<button type="button" class="btn btn-outline-danger">Outline Button</button>

<!-- Button by using Input tag -->
<input class="btn btn-danger" type="button" value="Input Tag Button">
    
    
<!--Warning Buttons HTML-->

<!-- Solid Button -->
<button type="button" class="btn btn-warning">Solid Button</button>

<!-- Disabled Button -->
<button type="button" class="btn btn-warning" disabled>Disabled Button</button>

<!-- Small Button -->
<button type="button" class="btn btn-warning btn-sm">Small Button</button>

<!-- Large Button -->
<button type="button" class="btn btn-warning btn-lg">Large Button</button>

<!-- Outline Button -->
<button type="button" class="btn btn-outline-warning">Outline Button</button>

<!-- Button by using Input tag -->
<input class="btn btn-warning" type="button" value="Input Tag Button">


<!--Info Buttons HTML-->

<!-- Solid Button -->
<button type="button" class="btn btn-info">Solid Button</button>

<!-- Disabled Button -->
<button type="button" class="btn btn-info" disabled>Disabled Button</button>

<!-- Small Button -->
<button type="button" class="btn btn-info btn-sm">Small Button</button>

<!-- Large Button -->
<button type="button" class="btn btn-info btn-lg">Large Button</button>

<!-- Outline Button -->
<button type="button" class="btn btn-outline-info">Outline Button</button>

<!-- Button by using Input tag -->
<input class="btn btn-info" type="button" value="Input Tag Button">
    

<!--Light Buttons HTML-->

<!-- Solid Button -->
<button type="button" class="btn btn-light">Solid Button</button>

<!-- Disabled Button -->
<button type="button" class="btn btn-light" disabled>Disabled Button</button>

<!-- Small Button -->
<button type="button" class="btn btn-light btn-sm">Small Button</button>

<!-- Large Button -->
<button type="button" class="btn btn-light btn-lg">Large Button</button>

<!-- Outline Button -->
<button type="button" class="btn text-secondary btn-outline-light">Outline Button</button>

<!-- Button by using Input tag -->
<input class="btn btn-light" type="button" value="Input Tag Button">


<!--Dark Buttons HTML-->

<!-- Solid Button -->
<button type="button" class="btn btn-dark">Solid Button</button>

<!-- Disabled Button -->
<button type="button" class="btn btn-dark" disabled>Disabled Button</button>

<!-- Small Button -->
<button type="button" class="btn btn-dark btn-sm">Small Button</button>

<!-- Large Button -->
<button type="button" class="btn btn-dark btn-lg">Large Button</button>

<!-- Outline Button -->
<button type="button" class="btn btn-outline-dark">Outline Button</button>

<!-- Button by using Input tag -->
<input class="btn btn-dark" type="button" value="Input Tag Button">

Must Read