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

Small

Regular

Large

<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>