Default
Apply .btn-* class followed by .btn class to create default buttons.
<button class="btn btn-primary mb-2 me-4">Primary</button> <button class="btn btn-info mb-2 me-4">Info</button> <button class="btn btn-success mb-2 me-4">Success</button> <button class="btn btn-warning mb-2 me-4">Warning</button> <button class="btn btn-danger mb-2 me-4">Danger</button> <button class="btn btn-secondary mb-2 me-4">Secondary</button> <button class="btn btn-dark mb-2 me-4">Dark</button>
Light
Apply .btn-light-* class followed by .btn class to create light buttons.
<button class="btn btn-light-primary mb-2 me-4">Primary</button> <button class="btn btn-light-info mb-2 me-4">Info</button> <button class="btn btn-light-success mb-2 me-4">Success</button> <button class="btn btn-light-warning mb-2 me-4">Warning</button> <button class="btn btn-light-danger mb-2 me-4">Danger</button> <button class="btn btn-light-secondary mb-2 me-4">Secondary</button> <button class="btn btn-light-dark mb-2 me-4">Dark</button>
Outline
Apply .btn-outline-* class followed by .btn class to create outline buttons.
<button class="btn btn-outline-primary mb-2 me-4">Primary</button> <button class="btn btn-outline-info mb-2 me-4">Info</button> <button class="btn btn-outline-success mb-2 me-4">Success</button> <button class="btn btn-outline-warning mb-2 me-4">Warning</button> <button class="btn btn-outline-danger mb-2 me-4">Danger</button> <button class="btn btn-outline-secondary mb-2 me-4">Secondary</button> <button class="btn btn-outline-dark mb-2 me-4">Dark</button>
Disabled
Use disabled attribute to create Disabled buttons.
<button class="btn btn-primary mb-2 me-4" disabled>Primary</button> <button class="btn btn-info mb-2 me-4" disabled>Info</button> <button class="btn btn-success mb-2 me-4" disabled>Success</button> <button class="btn btn-warning mb-2 me-4" disabled>Warning</button> <button class="btn btn-danger mb-2 me-4" disabled>Danger</button> <button class="btn btn-secondary mb-2 me-4" disabled>Secondary</button> <button class="btn btn-dark mb-2 me-4" disabled>Dark</button>
Rounded
Use .btn-rounded to make buttons rounded.
<!-- Default --> <button class="btn btn-primary btn-rounded mb-2 me-4">Primary</button> <button class="btn btn-info btn-rounded mb-2 me-4">Info</button> <button class="btn btn-success btn-rounded mb-2 me-4">Success</button> <button class="btn btn-warning btn-rounded mb-2 me-4">Warning</button> <button class="btn btn-danger btn-rounded mb-2 me-4">Danger</button> <button class="btn btn-secondary btn-rounded mb-2 me-4">Secondary</button> <button class="btn btn-dark btn-rounded mb-2 me-4">Dark</button> <!-- Outline --> <button class="btn btn-outline-primary btn-rounded mb-2 me-4">Primary</button> <button class="btn btn-outline-info btn-rounded mb-2 me-4">Info</button> <button class="btn btn-outline-success btn-rounded mb-2 me-4">Success</button> <button class="btn btn-outline-warning btn-rounded mb-2 me-4">Warning</button> <button class="btn btn-outline-danger btn-rounded mb-2 me-4">Danger</button> <button class="btn btn-outline-secondary btn-rounded mb-2 me-4">Secondary</button> <button class="btn btn-outline-dark btn-rounded mb-2 me-4">Dark</button>
Button Sizes
<!-- Default -->
<button class="btn btn-primary mb-2 me-4 btn-lg">Large button</button>
<button class="btn btn-secondary mb-2 me-4">Default button</button>
<button class="btn btn-warning mb-2 me-4 btn-sm">Small button</button>
<button class="btn btn-dark mb-2 me-4 btn-sm disabled">Disabled Button</button>
<!-- Outline -->
<button class="btn btn-outline-primary mb-2 me-4 btn-lg">Large button</button>
<button class="btn btn-outline-secondary mb-2 me-4">Default button</button>
<button class="btn btn-outline-warning mb-2 me-4 btn-sm">Small button</button>
<button class="btn btn-outline-dark mb-2 me-4 btn-sm disabled">Disabled Button</button>
Button with Icons
<!-- Default -->
<button class="btn btn-success mb-2 me-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
<span class="btn-text-inner">Button</span>
</button>
<button class="btn btn-success btn-icon mb-2 me-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</button>
<button class="btn btn-success btn-icon mb-2 me-4 btn-rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
</button>
<button class="btn btn-success mb-2" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
<span class="btn-text-inner">Button</span>
</button>
<!-- Outline -->
<button class="btn btn-outline-success mb-2 me-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
<span class="btn-text-inner">Button</span>
</button>
<button class="btn btn-outline-success btn-icon mb-2 me-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</button>
<button class="btn btn-outline-success btn-icon mb-2 me-4 btn-rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
</button>
<button class="btn btn-outline-success" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
<span class="btn-text-inner">Button</span>
</button>
Block Buttons
<div class="d-grid gap-2 col-6 mx-auto">
<!-- Default -->
<button class="btn btn-secondary mb-4" type="button">Default</button>
<!-- Outline -->
<button class="btn btn-outline-secondary mb-4" type="button">Outline</button>
<!-- Disabled -->
<button class="btn btn-secondary mb-4" type="button" disabled>Disabled</button>
</div>
Copyright © 2024 DesignReset, All rights reserved.
Coded with