Buttons
These modular elements can be readily used and customized in every layout across pages.
For detail documentation. View Buttons on Bootstrap ⟶
Buttons Colors
Slick uses .btn
class for default button style. Customize the color of a button using .btn-*
and .btn-outline-*
. You can use the following classes.
Solid Buttons
<button class="btn btn-primary me-1 mb-1" type="button">primary</button>
<button class="btn btn-secondary me-1 mb-1" type="button">secondary</button>
<button class="btn btn-success me-1 mb-1" type="button">success</button>
<button class="btn btn-info me-1 mb-1" type="button">info</button>
<button class="btn btn-warning me-1 mb-1" type="button">warning</button>
<button class="btn btn-danger me-1 mb-1" type="button">danger</button>
<button class="btn btn-light me-1 mb-1" type="button">light</button>
<button class="btn btn-dark me-1 mb-1" type="button">dark</button>
Outline Buttons
<button class="btn-outline-primary btn me-1 mb-1" type="button">primary</button>
<button class="btn-outline-secondary btn me-1 mb-1" type="button">secondary</button>
<button class="btn-outline-success btn me-1 mb-1" type="button">success</button>
<button class="btn-outline-info btn me-1 mb-1" type="button">info</button>
<button class="btn-outline-warning btn me-1 mb-1" type="button">warning</button>
<button class="btn-outline-danger btn me-1 mb-1" type="button">danger</button>
<button class="btn-outline-light btn me-1 mb-1" type="button">light</button>
<button class="btn-outline-dark btn me-1 mb-1" type="button">dark</button>
Hover Effects
<button class="hvr-sweep-right btn-outline-dark btn me-1 mb-1" type="button">Sweep right</button>
<button class="hvr-sweep-left btn-outline-primary btn me-1 mb-1" type="button">Sweep left</button>
<button class="hvr-sweep-top btn-outline-warning btn me-1 mb-1" type="button">Sweep top</button>
<button class="hvr-sweep-bottom btn-outline-success btn me-1 mb-1" type="button">Sweep bottom</button>
<button class="hvr-sweep-collapseX btn-outline-danger btn me-1 mb-1" type="button">Sweep collapseX</button>
<button class="hvr-sweep-collapseY btn-outline-info btn me-1 mb-1" type="button">Sweep collapseY</button>
<hr class="my-3" />
<button class="hvr-sweep-right btn-outline-dark btn rounded-pill me-1 mb-1" type="button">Sweep right</button>
<button class="hvr-sweep-left btn-outline-primary btn rounded-pill me-1 mb-1" type="button">Sweep left</button>
<button class="hvr-sweep-top btn-outline-warning btn rounded-pill me-1 mb-1" type="button">Sweep top</button>
<button class="hvr-sweep-bottom btn-outline-success btn rounded-pill me-1 mb-1" type="button">Sweep bottom</button>
<button class="hvr-sweep-collapseX btn-outline-danger btn rounded-pill me-1 mb-1" type="button">Sweep collapseX</button>
<button class="hvr-sweep-collapseY btn-outline-info btn rounded-pill me-1 mb-1" type="button">Sweep collapseY</button>
<hr class="my-3" />
<button class="hvr-sweep-right btn-dark btn rounded-pill me-1 mb-1" type="button">Sweep right</button>
<button class="hvr-sweep-left btn-primary btn rounded-pill me-1 mb-1" type="button">Sweep left</button>
<button class="hvr-sweep-top btn-warning btn rounded-pill me-1 mb-1" type="button">Sweep top</button>
<button class="hvr-sweep-bottom btn-success btn rounded-pill me-1 mb-1" type="button">Sweep bottom</button>
<button class="hvr-sweep-collapseX btn-danger btn rounded-pill me-1 mb-1" type="button">Sweep collapseX</button>
<button class="hvr-sweep-collapseY btn-info btn rounded-pill me-1 mb-1" type="button">Sweep collapseY</button>
Button sizes
<div class="btn btn-dark btn-sm">Small</div>
<div class="btn btn-dark">Regular</div>
<div class="btn btn-dark btn-lg">Large</div>
Icon Buttons
<button class="btn btn-dark btn-sm me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Small
</button>
<button class="btn btn-dark me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-dark btn-lg me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Large
</button>
<hr />
<button class="btn btn-primary me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-outline-primary me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Outline
</button>
<hr />
<button class="btn btn-primary me-1 mb-1" type="button">
Delete<span class="fas fa-trash ms-1" data-fa-transform="shrink-3"></span>
</button>
Button Capsule
<button class="btn btn-dark rounded-pill me-1 mb-1" type="button">Example</button>
<button class="btn btn-dark rounded-pill me-1 mb-1" type="button">
<span class="fas fa-align-left me-1" data-fa-transform="shrink-3"></span>Icon Left</button>
<button class="btn btn-dark rounded-pill me-1 mb-1" type="button">
Icon Right<span class="fas fa-align-right ms-1" data-fa-transform="shrink-3"></span>
</button><button class="ms-1 btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Outline</button>
<hr />
<button class="btn btn-sm btn-dark rounded-pill me-1 mb-1" type="button">Capsule Small</button>
<button class="btn btn-dark rounded-pill me-1 mb-1" type="button">Capsule Regular</button>
<button class="btn btn-lg btn-dark rounded-pill me-1 mb-1" type="button">Capsule Large </button>
Button Group
Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Basic Example
Wrap a series of buttons with.btn
in.btn-group
. Add on optional JavaScript radio and checkbox style behaviour with
<div class="btn-group" role="group" aria-label="Basic example">
<button class="btn btn-dark" type="button">Left</button>
<button class="btn btn-dark" type="button">Middle</button>
<button class="btn btn-dark" type="button">Right</button>
</div>
Button Toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2 mb-1" role="group" aria-label="First group">
<button class="btn btn-dark" type="button">1</button>
<button class="btn btn-dark" type="button">2</button>
<button class="btn btn-dark" type="button">3</button>
<button class="btn btn-dark" type="button">4</button>
</div>
<div class="btn-group me-2 mb-1" role="group" aria-label="Second group">
<button class="btn btn-dark" type="button">5</button>
<button class="btn btn-dark" type="button">6</button>
<button class="btn btn-dark" type="button">7</button>
</div>
<div class="btn-group mb-1" role="group" aria-label="Third group">
<button class="btn btn-dark" type="button">8</button>
</div>
</div>
Sizing
Insteam of aplying button sizing classes to every button in a group, just add.btn-gorup-*
to each.btn-group
, including each one when nesting multiple groups.
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button class="btn btn-dark" type="button">Left</button>
<button class="btn btn-dark" type="button">Middle</button>
<button class="btn btn-dark d-none d-md-inline-block" type="button">Right</button>
</div>
<div class="btn-group mt-2" role="group" aria-label="...">
<button class="btn btn-dark" type="button">Left</button>
<button class="btn btn-dark" type="button">Middle</button>
<button class="btn btn-dark" type="button">Right</button>
</div>
<div class="btn-group btn-group-sm mt-2" role="group" aria-label="...">
<button class="btn btn-dark" type="button">Left</button>
<button class="btn btn-dark" type="button">Middle</button>
<button class="btn btn-dark" type="button">Right</button>
</div>
Vertical variation
Make a set of buttons appear vertically tacked rather than horizontally. Split button dropdowns ae not supported here.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button class="btn btn-dark" type="button">Button</button>
<button class="btn btn-dark" type="button">Button</button>
<button class="btn btn-dark" type="button">Button</button>
<button class="btn btn-dark" type="button">Button</button>
<button class="btn btn-dark" type="button">Button</button>
<button class="btn btn-dark" type="button">Button</button>
</div>