Default
Apply .btn-* class followed by .btn class to create Solid buttons.
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>
&.html {
color: #e67980;
background-color: #2c1c2b;
}
&.css {
color: #4db0ff;
background-color: #0b2f52;
}
&.js {
color: #eab764;
background: #282625;
}
localVariablesSearch.searchCloseIcon.forEach((searchCloseEl, index) => {
if (searchCloseEl) {
searchCloseEl.addEventListener('click', function(event) {
event.stopPropagation();
localVariablesSearch.searchOverlay.classList.remove('show');
localVariablesSearch.searchAll[index].classList.remove('show-search');
localVariablesSearch.searchFormAll[index].classList.remove('input-focused');
document.querySelector('body').classList.remove('search-active');
})
}
})Solid Disabled States
Use disabled attribute to create Disabled buttons.
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Outline
Apply .btn-outline-* class followed by .btn class to create Outline buttons.
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</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-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Gradient
Apply .btn-gradient-* class followed by .btn class to create Gradient buttons.
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Flat
Apply .btn-flat-* class followed by .btn class to create Flat buttons.
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Rounded
Use .btn-rounded to make buttons rounded.
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Loader
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Button with Icons
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Icons Only
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Button Sizes
Apply .btn-lg for Large Buttons and .btn-sm for Small Button
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Block Buttons
<button class="btn btn-primary mb-2 me-4">Primary</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-info mb-2 me-4">Info</button>
<button class="btn btn-secondary mb-2 me-4">Secondary</button>
<button class="btn btn-dark mb-2 me-4">Dark</button>Copyright © 2026 DesignReset, All rights reserved.
Coded with
