Buttons
Use button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Buttons Defaults
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Buttons Soft & Ghost
Soft
Ghost
Ghost + Soft
<!-- soft -->
<button type="button" class="btn btn-soft btn-primary">Primary</button>
<button type="button" class="btn btn-soft btn-secondary">Secondary</button>
<button type="button" class="btn btn-soft btn-success">Success</button>
<button type="button" class="btn btn-soft btn-danger">Danger</button>
<button type="button" class="btn btn-soft btn-warning">Warning</button>
<button type="button" class="btn btn-soft btn-info">Info</button>
<button type="button" class="btn btn-soft btn-light">Light</button>
<button type="button" class="btn btn-soft btn-dark">Dark</button>
<!-- ghost -->
<button type="button" class="btn btn-ghost btn-primary">Primary</button>
<button type="button" class="btn btn-ghost btn-secondary">Secondary</button>
<button type="button" class="btn btn-ghost btn-success">Success</button>
<button type="button" class="btn btn-ghost btn-danger">Danger</button>
<button type="button" class="btn btn-ghost btn-warning">Warning</button>
<button type="button" class="btn btn-ghost btn-info">Info</button>
<button type="button" class="btn btn-ghost btn-light">Light</button>
<button type="button" class="btn btn-ghost btn-dark">Dark</button>
<!-- ghost + soft -->
<button type="button" class="btn btn-soft btn-ghost btn-primary">Primary</button>
<button type="button" class="btn btn-soft btn-ghost btn-secondary">Secondary</button>
<button type="button" class="btn btn-soft btn-ghost btn-success">Success</button>
<button type="button" class="btn btn-soft btn-ghost btn-danger">Danger</button>
<button type="button" class="btn btn-soft btn-ghost btn-warning">Warning</button>
<button type="button" class="btn btn-soft btn-ghost btn-info">Info</button>
<button type="button" class="btn btn-soft btn-ghost btn-light">Light</button>
<button type="button" class="btn btn-soft btn-ghost btn-dark">Dark</button>
Buttons Pill
<!-- .rounded-pill added to buttons -->
<button type="button" class="btn btn-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-success rounded-pill">Success</button>
<button type="button" class="btn btn-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-info rounded-pill">Info</button>
<button type="button" class="btn btn-soft btn-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-soft btn-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-soft btn-success rounded-pill">Success</button>
<button type="button" class="btn btn-soft btn-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-soft btn-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-soft btn-info rounded-pill">Info</button>
<button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-outline-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-outline-success rounded-pill">Success</button>
<button type="button" class="btn btn-outline-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-outline-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-outline-info rounded-pill">Info</button>
Buttons Static Shadow
<!-- .shadow-xl-* added to buttons -->
<button type="button" class="btn btn-primary shadow-xl-primary">Primary</button>
<button type="button" class="btn btn-secondary shadow-xl-secondary">Secondary</button>
<button type="button" class="btn btn-success shadow-xl-success">Success</button>
<button type="button" class="btn btn-danger shadow-xl-danger">Danger</button>
<button type="button" class="btn btn-warning shadow-xl-warning">Warning</button>
<button type="button" class="btn btn-info shadow-xl-info">Info</button>
<button type="button" class="btn btn-soft btn-primary shadow-xl-primary">Primary</button>
<button type="button" class="btn btn-soft btn-secondary shadow-xl-secondary">Secondary</button>
<button type="button" class="btn btn-soft btn-success shadow-xl-success">Success</button>
<button type="button" class="btn btn-soft btn-danger shadow-xl-danger">Danger</button>
<button type="button" class="btn btn-soft btn-warning shadow-xl-warning">Warning</button>
<button type="button" class="btn btn-soft btn-info shadow-xl-info">Info</button>
Buttons Hover Shadow
<!-- .shadow-xl-*-hover added to buttons -->
<button type="button" class="btn btn-primary shadow-xl-primary-hover">Primary</button>
<button type="button" class="btn btn-secondary shadow-xl-secondary-hover">Secondary</button>
<button type="button" class="btn btn-success shadow-xl-success-hover">Success</button>
<button type="button" class="btn btn-danger shadow-xl-danger-hover">Danger</button>
<button type="button" class="btn btn-warning shadow-xl-warning-hover">Warning</button>
<button type="button" class="btn btn-info shadow-xl-info-hover">Info</button>
<button type="button" class="btn btn-soft btn-primary shadow-xl-primary-hover">Primary</button>
<button type="button" class="btn btn-soft btn-secondary shadow-xl-secondary-hover">Secondary</button>
<button type="button" class="btn btn-soft btn-success shadow-xl-success-hover">Success</button>
<button type="button" class="btn btn-soft btn-danger shadow-xl-danger-hover">Danger</button>
<button type="button" class="btn btn-soft btn-warning shadow-xl-warning-hover">Warning</button>
<button type="button" class="btn btn-soft btn-info shadow-xl-info-hover">Info</button>
Buttons Hover Animate
<button type="button" class="btn btn-primary transition-top-hover">Primary</button>
<button type="button" class="btn btn-secondary transition-top-hover">Secondary</button>
<button type="button" class="btn btn-success transition-top-hover">Success</button>
<button type="button" class="btn btn-danger transition-top-hover">Danger</button>
<button type="button" class="btn btn-warning transition-top-hover">Warning</button>
<button type="button" class="btn btn-info transition-top-hover">Info</button>
<button type="button" class="btn btn-soft btn-primary transition-top-hover">Primary</button>
<button type="button" class="btn btn-soft btn-secondary transition-top-hover">Secondary</button>
<button type="button" class="btn btn-soft btn-success transition-top-hover">Success</button>
<button type="button" class="btn btn-soft btn-danger transition-top-hover">Danger</button>
<button type="button" class="btn btn-soft btn-warning transition-top-hover">Warning</button>
<button type="button" class="btn btn-soft btn-info transition-top-hover">Info</button>
Buttons Hover Animate + Shadow
<button type="button" class="btn btn-primary transition-top-hover shadow-xl-primary-hover">Primary</button>
<button type="button" class="btn btn-secondary transition-top-hover shadow-xl-secondary-hover">Secondary</button>
<button type="button" class="btn btn-success transition-top-hover shadow-xl-success-hover">Success</button>
<button type="button" class="btn btn-danger transition-top-hover shadow-xl-danger-hover">Danger</button>
<button type="button" class="btn btn-warning transition-top-hover shadow-xl-warning-hover">Warning</button>
<button type="button" class="btn btn-info transition-top-hover shadow-xl-info-hover">Info</button>
<button type="button" class="btn btn-soft btn-primary transition-top-hover shadow-xl-primary-hover">Primary</button>
<button type="button" class="btn btn-soft btn-secondary transition-top-hover shadow-xl-secondary-hover">Secondary</button>
<button type="button" class="btn btn-soft btn-success transition-top-hover shadow-xl-success-hover">Success</button>
<button type="button" class="btn btn-soft btn-danger transition-top-hover shadow-xl-danger-hover">Danger</button>
<button type="button" class="btn btn-soft btn-warning transition-top-hover shadow-xl-warning-hover">Warning</button>
<button type="button" class="btn btn-soft btn-info transition-top-hover shadow-xl-info-hover">Info</button>
Buttons Tags & Size
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
<div class="d-grid">
<button type="button" class="btn btn-primary">Block level button</button>
</div>
<button type="button" class="btn btn-sm btn-primary">Small</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-lg btn-primary">Large</button>
<button type="button" class="btn btn-soft btn-sm btn-primary">Small</button>
<button type="button" class="btn btn-soft btn-primary">Normal</button>
<button type="button" class="btn btn-soft btn-lg btn-primary">Large</button>
Button Close
<button type="button" class="btn-close" aria-label="Close"></button>
<button type="button" class="btn-close" disabled aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
Button Various
<!-- App Store -->
<a href="#!" class="btn btn-dark bg-gradient bg-dark border-0 mx-1 py-3 rounded-xl">
<svg height="32" viewBox="0 0 90 90">
<path fill="#ffffff" d="M49.645 6.817c3.232-3.8 8.695-6.627 13.203-6.817.575 5.279-1.541 10.565-4.669 14.374-3.133 3.802-8.261 6.764-13.294 6.369-.684-5.165 1.851-10.551 4.76-13.926zm25.646 72.01c-3.741 5.485-7.61 10.938-13.718 11.053-6.012.114-7.938-3.571-14.799-3.571-6.866 0-9.016 3.457-14.69 3.686-5.897.222-10.382-5.926-14.152-11.387-7.703-11.168-13.585-31.576-5.677-45.35 3.916-6.84 10.934-11.167 18.537-11.282 5.792-.107 11.263 3.917 14.799 3.917 3.544 0 10.185-4.831 17.165-4.122 2.922.121 11.123 1.181 16.391 8.912-.417.274-9.789 5.745-9.676 17.141.114 13.614 11.891 18.137 12.029 18.199-.108.32-1.884 6.459-6.209 12.804z"></path>
</svg>
<span class="text-start px-2">
<small class="d-block lh-1">Download on the</small>
<span class="d-block lh-1 fs-5 pt-1">App Store</span>
</span>
</a>
<!-- Play Store -->
<a href="#!" class="btn btn-dark bg-gradient bg-dark border-0 mx-1 py-3 rounded-xl">
<svg height="32" viewBox="0 0 512 512">
<path fill="#ffffff" d="M99.617 8.057c-11.664-7.537-25.674-9.815-38.815-6.713l230.932 230.933 74.846-74.846-266.963-149.374zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877-235.877-235.879zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711l-230.918 230.918c3.786.891 7.639 1.371 11.492 1.371 9.522 0 19.011-2.708 27.31-8.07l266.965-149.372-74.849-74.847z"></path>
</svg>
<span class="text-start px-2">
<small class="d-block lh-1">Download on the</small>
<span class="d-block lh-1 fs-5 pt-1">Play Store</span>
</span>
</a>