Buttons
Use buttons styles for links or buttons with multiple styles and sizes
<!-- <a> -->
<a class="c-btn c-btn--info" href="#!">Button</a>
<!-- <button> -->
<button class="c-btn c-btn--info">Button</button>
Style Variants
Define button’s style by using one the modifier classes: c-button--success,
c-button--info, c-button--warning, c-button--danger, c-button--primary
or c-button--secondary
<button class="c-btn c-btn--success">Success</button>
<button class="c-btn c-btn--info">Info</button>
<button class="c-btn c-btn--warning">Warning</button>
<button class="c-btn c-btn--danger">Danger</button>
<button class="c-btn c-btn--primary">Primary</button>
<button class="c-btn c-btn--secondary">Secondary</button>
Size Variants
Define button’s size by using one the modifier classes: c-btn--small or c-btn--large.
<button class="c-btn c-btn--success c-btn--small">Button</button>
<button class="c-btn c-btn--info">Button</button>
<button class="c-btn c-btn--warning c-btn--large">Button</button>
Disabled Button
Disable a button by adding disabled attribute when using <button> but if you
are using <a> as a button, you should use is-disabled class.
<button class="c-btn c-btn--info" disabled>Disabled Button</button>
<a class="c-btn c-btn--info is-disabled" href="#!">Disabled Button</a>
Full Width Button
Force button to take full width of its container by adding c-btn--fullwidth
modifier class.
<button class="c-btn c-btn--info c-btn--fullwidth">Full-Width Button</button>
<a class="c-btn c-btn--success c-btn--fullwidth" href="#!">Full-Width Button</a>
Button with icon
Add an icon within the button. This is useful when you use button as a dropdown toggle.
<button class="c-btn c-btn--secondary">
Button <i class="feather icon-chevron-down"></i>
</button>