Buttons
Buttons allow users to take actions, and make choices, with a single tap.
Basic buttons
Primary buttons
Secondary buttons
Error buttons
Success buttons
<-- Primary buttons -->
<button class="btn btn-md btn-primary-contained">Contained</button>
<button class="btn btn-md btn-primary-outlined">Outlined</button>
<a href="#" class="btn btn-md btn-primary-link btn-link">Link</a>
<button class="btn btn-md btn-primary-floating btn-floating floating-md">+</button>
<-- Secondary buttons -->
<button class="btn btn-md btn-secondary-contained">Contained</button>
<button class="btn btn-md btn-secondary-outlined">Outlined</button>
<a href="#" class="btn btn-md btn-secondary-link btn-link">Link</a>
<button class="btn btn-md btn-secondary-floating btn-floating floating-md">+</button>
<-- Error buttons -->
<button class="btn btn-md btn-fire-contained">Contained</button>
<button class="btn btn-md btn-fire-outlined">Outlined</button>
<a href="#" class="btn btn-md btn-fire-link btn-link">Link</a>
<button class="btn btn-md btn-fire-floating btn-floating floating-md">+</button>
<-- Success buttons -->
<button class="btn btn-md btn-success-contained">Contained</button>
<button class="btn btn-md btn-success-outlined">Outlined</button>
<a href="#" class="btn btn-md btn-success-link btn-link">Link</a>
<button class="btn btn-md btn-success-floating btn-floating floating-md">+</button>
Different sizes of buttons
<-- Small buttons -->
<button class="btn btn-sm btn-primary-contained">Contained</button>
<button class="btn btn-sm btn-primary-outlined">Outlined</button>
<a href="#" class="btn btn-sm btn-primary-link btn-link">Link</a>
<button class="btn btn-sm btn-primary-floating btn-floating floating-sm">+</button>
<-- Medium buttons -->
<button class="btn btn-md btn-primary-contained">Contained</button>
<button class="btn btn-md btn-primary-outlined">Outlined</button>
<a href="#" class="btn btn-md btn-primary-link btn-link">Link</a>
<button class="btn btn-md btn-primary-floating btn-floating floating-md">+</button>
<-- Large buttons -->
<button class="btn btn-lg btn-primary-contained">Contained</button>
<button class="btn btn-lg btn-primary-outlined">Outlined</button>
<a href="#" class="btn btn-lg btn-primary-link btn-link">Link</a>
<button class="btn btn-lg btn-primary-floating btn-floating floating-lg">+</button>
Link buttons
<button class="btn btn-md">
<a href="#" class="btn btn-link btn-primary-contained">Contained link</a>
</button>
<button class="btn btn-md">
<a href="#" class="btn btn-link btn-primary-outlined">Outlined link</a>
</button>
Disabled buttons
<button class="btn btn-lg btn-disabled-contained" disabled>Disabled</button>
<button class="btn btn-lg btn-disabled-outlined" disabled>Disabled</button>
Big buttons
<div class="big-btn-container">
<button class="btn btn-md btn-primary-contained btn-big btn-space">
<i class="fa fa-heart-o"></i> Add to wishlist
</button>
</div>
<div class="big-btn-container">
<button class="btn btn-md btn-primary-outlined btn-big btn-space">Add to wishlist</button>
</div>
Icon with text button
<button class="btn btn-md btn-primary-contained btn-space">
<i class="fa fa-shopping-cart"></i> Add to cart
</button>
<button class="btn btn-md btn-fire-outlined btn-space">
<i class="fa fa-refresh"></i> Refresh
</button>
Solid icon button
<button class="btn btn-lg icon-lg btn-icon-solid btn-normal"><i class="fa fa-trash"></i></button>
<button class="btn btn-lg icon-lg btn-icon-solid btn-fire"><i class="fa fa-heart"></i></button>
<button class="btn btn-lg icon-lg btn-icon-solid btn-primary"><i class="fa fa-envelope"></i></button>
<button class="btn btn-lg icon-lg btn-icon-solid btn-secondary"><i class="fa fa-paper-plane"></i></button>
<button class="btn btn-lg icon-lg btn-icon-solid btn-success"><i class="fa fa-gear"></i></button>
Contained icon button
<button class="btn btn-lg icon-lg btn-icon-contained btn-normal"><i class="fa fa-trash"></i></button>
<button class="btn btn-lg icon-lg btn-icon-contained btn-fire"><i class="fa fa-heart"></i></button>
<button class="btn btn-lg icon-lg btn-icon-contained btn-primary"><i class="fa fa-envelope"></i></button>
<button class="btn btn-lg icon-lg btn-icon-contained btn-secondary"><i class="fa fa-paper-plane"></i></button>
<button class="btn btn-lg icon-lg btn-icon-contained btn-success"><i class="fa fa-gear"></i></button>
Image button
<div class="img-btn-wrapper">
<img src="https://picsum.photos/200?blur=1" class="image img-responsive">
<button class="btn btn-over-image">Click me!</button>
</div>