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>