Buttons are of six types:

  • Standard (outline)
  • Primary (solid primary color background)
  • Success (solid success color background)
  • Warning (solid warning color background)
  • Danger (solid danger color background)
  • Info (solid info color background)

Use them as you would normally use a button - anchor links, input, submit etc..

Standard:

Anchor button standard

Primary:

Anchor button primary

Success:

Anchor button success

Warning:

Anchor button warning

Danger:

Anchor button danger

Info:

Anchor button info

Example Code:

<!-- Outline (Standard) Buttons: -->
<a class="button" href="#">Anchor button standard</a>
<button>Button element standard</button>
<input type="submit" value="submit input standard">
<input type="button" value="button input standard">

<!-- Primary Buttons: -->
<a class="button button-primary" href="#">Anchor button primary</a>
<button class="button-primary">Button element primary</button>
<input class="button-primary" type="submit" value="submit input primary">
<input class="button-primary" type="button" value="button input primary">
</div>

<!-- Success Buttons: -->
<a class="button button-success" href="#">Anchor button success</a>
<button class="button-success">Button element success</button>
<input class="button-success" type="submit" value="submit input success">
<input class="button-success" type="button" value="button input success">

<!-- Warning Buttons: -->
<a class="button button-warning" href="#">Anchor button warning</a>
<button class="button-warning">Button element warning</button>
<input class="button-warning" type="submit" value="submit input warning">
<input class="button-warning" type="button" value="button input warning">

<!-- Danger Buttons: -->
<a class="button button-danger" href="#">Anchor button danger</a>
<button class="button-danger">Button element danger</button>
<input class="button-danger" type="submit" value="submit input danger">
<input class="button-danger" type="button" value="button input danger">

<!-- info Buttons: -->
<a class="button button-info" href="#">Anchor button info</a>
<button class="button-info">Button element info</button>
<input class="button-info" type="submit" value="submit input info">
<input class="button-info" type="button" value="button input info">