Buttons

HTML
Pug

<!-- Primary Button -->
<a class="btn btn-primary" href="#">
  <i class="fe-icon-edit mr-1"></i>
  Primary
</a>

<!-- Secondary Button -->
<a class="btn btn-secondary" href="#">
  Secondary
  <i class="fe-icon-sliders ml-1"></i>
</a>

<!-- Accent Button -->
<a class="btn btn-accent" href="#">
  <i class="fe-icon-camera mr-1"></i>
  Secondary
</a>

<!-- Info Button -->
<a class="btn btn-info" href="#">
  Info
</a>

<!-- Success Button -->
<a class="btn btn-success" href="#">
  Success
</a>

<!-- Warning Button -->
<a class="btn btn-warning" href="#">
  Warning
</a>

<!-- Danger Button -->
<a class="btn btn-danger" href="#">
  Danger
</a>

<!-- Gradient Button -->
<a class="btn btn-gradient" href="#">
  Gradient
</a>

<!-- Light Button -->
<a class="btn btn-light" href="#">
  <i class="fe-icon-settings mr-1"></i>
  Light Button
</a>

<!-- Dark Button -->
<a class="btn btn-dark" href="#">
  Dark Button
</a>

<!-- Large Button -->
<a class="btn btn-secondary btn-lg" href="#">
  Large Button
</a>

<!-- Small Button -->
<a class="btn btn-secondary btn-sm" href="#">
  Small Button
</a>

<!-- Block Button -->
<a class="btn btn-secondary btn-block" href="#">
  Block Button
</a>

//- Primary Button
a(href="#").btn.btn-primary
  i.fe-icon-edit.mr-1
  | Primary

//- Secondary Button
a(href="#").btn.btn-secondary
  | Secondary
  i.fe-icon-sliders.ml-1

//- Accent Button
a(href="#").btn.btn-accent
  i.fe-icon-camera.mr-1
  | Accent

//- Info Button
a(href="#").btn.btn-info Info

//- Success Button
a(href="#").btn.btn-success Success

//- Warning Button
a(href="#").btn.btn-warning Warning

//- Danger Button
a(href="#").btn.btn-danger Danger

//- Gradient Button
a(href="#").btn.btn-gradient Gradient

//- Light Button
a(href="#").btn.btn-light
  i.fe-icon-settings.mr-1
  | Light Button

//- Dark Button
a(href="#").btn.btn-dark Dark Button

//- Large Button
a(href="#").btn.btn-secondary.btn-lg Large Button

//- Small Button
a(href="#").btn.btn-secondary.btn-sm Small Button

//- Block Button
a(href="#").btn.btn-secondary.btn-block Block Button

HTML
Pug

<!-- Primary Button -->
<a class="btn btn-style-2 btn-primary" href="#">
  <i class="fe-icon-edit mr-1"></i>
  Primary
</a>

<!-- Secondary Button -->
<a class="btn btn-style-2 btn-secondary" href="#">
  Secondary
  <i class="fe-icon-sliders ml-1"></i>
</a>

<!-- Accent Button -->
<a class="btn btn-style-2 btn-accent" href="#">
  <i class="fe-icon-camera mr-1"></i>
  Secondary
</a>

<!-- Info Button -->
<a class="btn btn-style-2 btn-info" href="#">
  Info
</a>

<!-- Success Button -->
<a class="btn btn-style-2 btn-success" href="#">
  Success
</a>

<!-- Warning Button -->
<a class="btn btn-style-2 btn-warning" href="#">
  Warning
</a>

<!-- Danger Button -->
<a class="btn btn-style-2 btn-danger" href="#">
  Danger
</a>

<!-- Gradient Button -->
<a class="btn btn-style-2 btn-gradient" href="#">
  Gradient
</a>

<!-- Light Button -->
<a class="btn btn-style-2 btn-light" href="#">
  <i class="fe-icon-settings mr-1"></i>
  Light Button
</a>

<!-- Dark Button -->
<a class="btn btn-style-2 btn-dark" href="#">
  Dark Button
</a>

<!-- Large Button -->
<a class="btn btn-style-2 btn-secondary btn-lg" href="#">
  Large Button
</a>

<!-- Small Button -->
<a class="btn btn-style-2 btn-secondary btn-sm" href="#">
  Small Button
</a>

<!-- Block Button -->
<a class="btn btn-style-2 btn-secondary btn-block" href="#">
  Block Button
</a>

//- Primary Button
a(href="#").btn.btn-style-2.btn-primary
  i.fe-icon-edit.mr-1
  | Primary

//- Secondary Button
a(href="#").btn.btn-style-2.btn-secondary
  | Secondary
  i.fe-icon-sliders.ml-1

//- Accent Button
a(href="#").btn.btn-style-2.btn-accent
  i.fe-icon-camera.mr-1
  | Accent

//- Info Button
a(href="#").btn.btn-style-2.btn-info Info

//- Success Button
a(href="#").btn.btn-style-2.btn-success Success

//- Warning Button
a(href="#").btn.btn-style-2.btn-warning Warning

//- Danger Button
a(href="#").btn.btn-style-2.btn-danger Danger

//- Gradient Button
a(href="#").btn.btn-style-2.btn-gradient Gradient

//- Light Button
a(href="#").btn.btn-style-2.btn-light
  i.fe-icon-settings.mr-1
  | Light Button

//- Dark Button
a(href="#").btn.btn-style-2.btn-dark Dark Button

//- Large Button
a(href="#").btn.btn-style-2.btn-secondary.btn-lg Large Button

//- Small Button
a(href="#").btn.btn-style-2.btn-secondary.btn-sm Small Button

//- Block Button
a(href="#").btn.btn-style-2.btn-secondary.btn-block Block Button

HTML
Pug

<!-- Primary Button -->
<a class="btn btn-style-3 btn-primary" href="#">
  <i class="fe-icon-edit mr-1"></i>
  Primary
</a>

<!-- Secondary Button -->
<a class="btn btn-style-3 btn-secondary" href="#">
  Secondary
  <i class="fe-icon-sliders ml-1"></i>
</a>

<!-- Accent Button -->
<a class="btn btn-style-3 btn-accent" href="#">
  <i class="fe-icon-camera mr-1"></i>
  Secondary
</a>

<!-- Info Button -->
<a class="btn btn-style-3 btn-info" href="#">
  Info
</a>

<!-- Success Button -->
<a class="btn btn-style-3 btn-success" href="#">
  Success
</a>

<!-- Warning Button -->
<a class="btn btn-style-3 btn-warning" href="#">
  Warning
</a>

<!-- Danger Button -->
<a class="btn btn-style-3 btn-danger" href="#">
  Danger
</a>

<!-- Gradient Button -->
<a class="btn btn-style-3 btn-gradient" href="#">
  Gradient
</a>

<!-- Light Button -->
<a class="btn btn-style-3 btn-light" href="#">
  <i class="fe-icon-settings mr-1"></i>
  Light Button
</a>

<!-- Dark Button -->
<a class="btn btn-style-3 btn-dark" href="#">
  Dark Button
</a>

<!-- Large Button -->
<a class="btn btn-style-3 btn-secondary btn-lg" href="#">
  Large Button
</a>

<!-- Small Button -->
<a class="btn btn-style-3 btn-secondary btn-sm" href="#">
  Small Button
</a>

<!-- Block Button -->
<a class="btn btn-style-3 btn-secondary btn-block" href="#">
  Block Button
</a>

//- Primary Button
a(href="#").btn.btn-style-3.btn-primary
  i.fe-icon-edit.mr-1
  | Primary

//- Secondary Button
a(href="#").btn.btn-style-3.btn-secondary
  | Secondary
  i.fe-icon-sliders.ml-1

//- Accent Button
a(href="#").btn.btn-style-3.btn-accent
  i.fe-icon-camera.mr-1
  | Accent

//- Info Button
a(href="#").btn.btn-style-3.btn-info Info

//- Success Button
a(href="#").btn.btn-style-3.btn-success Success

//- Warning Button
a(href="#").btn.btn-style-3.btn-warning Warning

//- Danger Button
a(href="#").btn.btn-style-3.btn-danger Danger

//- Gradient Button
a(href="#").btn.btn-style-3.btn-gradient Gradient

//- Light Button
a(href="#").btn.btn-style-3.btn-light
  i.fe-icon-settings.mr-1
  | Light Button

//- Dark Button
a(href="#").btn.btn-style-3.btn-dark Dark Button

//- Large Button
a(href="#").btn.btn-style-3.btn-secondary.btn-lg Large Button

//- Small Button
a(href="#").btn.btn-style-3.btn-secondary.btn-sm Small Button

//- Block Button
a(href="#").btn.btn-style-3.btn-secondary.btn-block Block Button

HTML
Pug

<!-- Primary Button -->
<a class="btn btn-style-4 btn-primary" href="#">
  <i class="fe-icon-edit mr-1"></i>
  Primary
</a>

<!-- Secondary Button -->
<a class="btn btn-style-4 btn-secondary" href="#">
  Secondary
  <i class="fe-icon-sliders ml-1"></i>
</a>

<!-- Accent Button -->
<a class="btn btn-style-4 btn-accent" href="#">
  <i class="fe-icon-camera mr-1"></i>
  Secondary
</a>

<!-- Info Button -->
<a class="btn btn-style-4 btn-info" href="#">
  Info
</a>

<!-- Success Button -->
<a class="btn btn-style-4 btn-success" href="#">
  Success
</a>

<!-- Warning Button -->
<a class="btn btn-style-4 btn-warning" href="#">
  Warning
</a>

<!-- Danger Button -->
<a class="btn btn-style-4 btn-danger" href="#">
  Danger
</a>

<!-- Gradient Button -->
<a class="btn btn-style-4 btn-gradient" href="#">
  Gradient
</a>

<!-- Light Button -->
<a class="btn btn-style-4 btn-light" href="#">
  <i class="fe-icon-settings mr-1"></i>
  Light Button
</a>

<!-- Dark Button -->
<a class="btn btn-style-4 btn-dark" href="#">
  Dark Button
</a>

<!-- Large Button -->
<a class="btn btn-style-4 btn-secondary btn-lg" href="#">
  Large Button
</a>

<!-- Small Button -->
<a class="btn btn-style-4 btn-secondary btn-sm" href="#">
  Small Button
</a>

<!-- Block Button -->
<a class="btn btn-style-4 btn-secondary btn-block" href="#">
  Block Button
</a>

//- Primary Button
a(href="#").btn.btn-style-4.btn-primary
  i.fe-icon-edit.mr-1
  | Primary

//- Secondary Button
a(href="#").btn.btn-style-4.btn-secondary
  | Secondary
  i.fe-icon-sliders.ml-1

//- Accent Button
a(href="#").btn.btn-style-4.btn-accent
  i.fe-icon-camera.mr-1
  | Accent

//- Info Button
a(href="#").btn.btn-style-4.btn-info Info

//- Success Button
a(href="#").btn.btn-style-4.btn-success Success

//- Warning Button
a(href="#").btn.btn-style-4.btn-warning Warning

//- Danger Button
a(href="#").btn.btn-style-4.btn-danger Danger

//- Gradient Button
a(href="#").btn.btn-style-4.btn-gradient Gradient

//- Light Button
a(href="#").btn.btn-style-4.btn-light
  i.fe-icon-settings.mr-1
  | Light Button

//- Dark Button
a(href="#").btn.btn-style-4.btn-dark Dark Button

//- Large Button
a(href="#").btn.btn-style-4.btn-secondary.btn-lg Large Button

//- Small Button
a(href="#").btn.btn-style-4.btn-secondary.btn-sm Small Button

//- Block Button
a(href="#").btn.btn-style-4.btn-secondary.btn-block Block Button

HTML
Pug

<!-- Primary Button -->
<a class="btn btn-style-5 btn-primary" href="#">
  <i class="fe-icon-edit mr-1"></i>
  Primary
</a>

<!-- Secondary Button -->
<a class="btn btn-style-5 btn-secondary" href="#">
  Secondary
  <i class="fe-icon-sliders ml-1"></i>
</a>

<!-- Accent Button -->
<a class="btn btn-style-5 btn-accent" href="#">
  <i class="fe-icon-camera mr-1"></i>
  Secondary
</a>

<!-- Info Button -->
<a class="btn btn-style-5 btn-info" href="#">
  Info
</a>

<!-- Success Button -->
<a class="btn btn-style-5 btn-success" href="#">
  Success
</a>

<!-- Warning Button -->
<a class="btn btn-style-5 btn-warning" href="#">
  Warning
</a>

<!-- Danger Button -->
<a class="btn btn-style-5 btn-danger" href="#">
  Danger
</a>

<!-- Gradient Button -->
<a class="btn btn-style-5 btn-gradient" href="#">
  Gradient
</a>

<!-- Light Button -->
<a class="btn btn-style-5 btn-light" href="#">
  <i class="fe-icon-settings mr-1"></i>
  Light Button
</a>

<!-- Dark Button -->
<a class="btn btn-style-5 btn-dark" href="#">
  Dark Button
</a>

<!-- Large Button -->
<a class="btn btn-style-5 btn-secondary btn-lg" href="#">
  Large Button
</a>

<!-- Small Button -->
<a class="btn btn-style-5 btn-secondary btn-sm" href="#">
  Small Button
</a>

<!-- Block Button -->
<a class="btn btn-style-5 btn-secondary btn-block" href="#">
  Block Button
</a>

//- Primary Button
a(href="#").btn.btn-style-5.btn-primary
  i.fe-icon-edit.mr-1
  | Primary

//- Secondary Button
a(href="#").btn.btn-style-5.btn-secondary
  | Secondary
  i.fe-icon-sliders.ml-1

//- Accent Button
a(href="#").btn.btn-style-5.btn-accent
  i.fe-icon-camera.mr-1
  | Accent

//- Info Button
a(href="#").btn.btn-style-5.btn-info Info

//- Success Button
a(href="#").btn.btn-style-5.btn-success Success

//- Warning Button
a(href="#").btn.btn-style-5.btn-warning Warning

//- Danger Button
a(href="#").btn.btn-style-5.btn-danger Danger

//- Gradient Button
a(href="#").btn.btn-style-5.btn-gradient Gradient

//- Light Button
a(href="#").btn.btn-style-5.btn-light
  i.fe-icon-settings.mr-1
  | Light Button

//- Dark Button
a(href="#").btn.btn-style-5.btn-dark Dark Button

//- Large Button
a(href="#").btn.btn-style-5.btn-secondary.btn-lg Large Button

//- Small Button
a(href="#").btn.btn-style-5.btn-secondary.btn-sm Small Button

//- Block Button
a(href="#").btn.btn-style-5.btn-secondary.btn-block Block Button

HTML
Pug

<!-- Primary Button -->
<a class="btn btn-style-6 btn-primary" href="#">
  <i class="fe-icon-edit mr-1"></i>
  Primary
</a>

<!-- Secondary Button -->
<a class="btn btn-style-6 btn-secondary" href="#">
  Secondary
  <i class="fe-icon-sliders ml-1"></i>
</a>

<!-- Accent Button -->
<a class="btn btn-style-6 btn-accent" href="#">
  <i class="fe-icon-camera mr-1"></i>
  Secondary
</a>

<!-- Info Button -->
<a class="btn btn-style-6 btn-info" href="#">
  Info
</a>

<!-- Success Button -->
<a class="btn btn-style-6 btn-success" href="#">
  Success
</a>

<!-- Warning Button -->
<a class="btn btn-style-6 btn-warning" href="#">
  Warning
</a>

<!-- Danger Button -->
<a class="btn btn-style-6 btn-danger" href="#">
  Danger
</a>

<!-- Gradient Button -->
<a class="btn btn-style-6 btn-gradient" href="#">
  Gradient
</a>

<!-- Light Button -->
<a class="btn btn-style-6 btn-light" href="#">
  <i class="fe-icon-settings mr-1"></i>
  Light Button
</a>

<!-- Dark Button -->
<a class="btn btn-style-6 btn-dark" href="#">
  Dark Button
</a>

<!-- Large Button -->
<a class="btn btn-style-6 btn-secondary btn-lg" href="#">
  Large Button
</a>

<!-- Small Button -->
<a class="btn btn-style-6 btn-secondary btn-sm" href="#">
  Small Button
</a>

<!-- Block Button -->
<a class="btn btn-style-6 btn-secondary btn-block" href="#">
  Block Button
</a>

//- Primary Button
a(href="#").btn.btn-style-6.btn-primary
  i.fe-icon-edit.mr-1
  | Primary

//- Secondary Button
a(href="#").btn.btn-style-6.btn-secondary
  | Secondary
  i.fe-icon-sliders.ml-1

//- Accent Button
a(href="#").btn.btn-style-6.btn-accent
  i.fe-icon-camera.mr-1
  | Accent

//- Info Button
a(href="#").btn.btn-style-6.btn-info Info

//- Success Button
a(href="#").btn.btn-style-6.btn-success Success

/- Warning Button
a(href="#").btn.btn-style-6.btn-warning Warning

//- Danger Button
a(href="#").btn.btn-style-6.btn-danger Danger

//- Gradient Button
a(href="#").btn.btn-style-6.btn-gradient Gradient

//- Light Button
a(href="#").btn.btn-style-6.btn-light
  i.fe-icon-settings.mr-1
  | Light Button

//- Dark Button
a(href="#").btn.btn-style-6.btn-dark Dark Button

//- Large Button
a(href="#").btn.btn-style-6.btn-secondary.btn-lg Large Button

//- Small Button
a(href="#").btn.btn-style-6.btn-secondary.btn-sm Small Button

//- Block Button
a(href="#").btn.btn-style-6.btn-secondary.btn-block Block Button

UI Kit

ALL

A-B

C-F

G-L

M-P

R-S

T-W

Buttons

Code

Code

Code

Code

Code

Code

Style 1 (Default)

Style 2

Style 3

Style 4

Style 5

Style 6