1. Docs
  2. Components
  3. Buttons
Buy Now Contact

Buttons

Use buttons styles for links or buttons with multiple styles and sizes

Button

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

<!-- <button> -->
<button class="c-btn c-btn--success">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.

Disabled Button

<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.

Full-Width Button

<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 dropdown

Add a small arrow to the button by adding has-dropdown class. This is useful when you use button as a dropdown toggle.


<button class="c-btn c-btn--secondary has-dropdown">Button</button>