Buttons

Buttons make the apps interactive & dynamic, it helps user to take action with just one click

Primary buttons

Primary buttons are the most important button of any app, which you want to use throughout your app.

<button class="btn">Solid</button>

<button class="btn btn-outline">Outline</button>

<button class="btn btn-text">Text</button>

<button class="btn-icon">
  <span><i class="fa fa-shopping-cart"></i></span>
</button>

<button class="btn">
  <span class="icon"><i class="fa fa-heart"></i></span> Heart
</button>

<button class="btn">
  <span class="icon"><i class="fa fa-shopping-cart"></i></span>
  Add to Cart
</button>  
            

Common buttons

There are common buttons which you will see in any app like success, danger, warning, info, dark, secondary buttons which have there own purpose.

<button class="btn btn-success">Success</button>

<button class="btn btn-danger">Danger</button>

<button class="btn btn-warning">Warning</button>

<button class="btn btn-info">Info</button>

<button class="btn btn-dark">Dark</button>

<button class="btn btn-secondary">Secondary</button>  
            

Sizes

There are large and small buttons, add btn-lg or btn-sm class for it.

<button class="btn btn-primary btn-lg">Large button</button>

<button class="btn btn-primary btn-sm">Small button</button>
            

Floating action button

Floating action button with icons allow users to take single actions like delete button, add btn-float-action class for it.

<button class="btn btn-float-action">
  <i class="fa fa-arrow-up"></i>
</button>

<button class="btn btn-float-action">
  <i class="fa fa-plus"></i>
</button>

<button class="btn btn-float-action">
  <i class="fa fa-pencil"></i>
</button>