Kanso (簡素), in Japanese aesthetics, means simplicity or elimination of clutter. Things are expressed in a plain, simple, natural manner. Reminds us to think not in terms of decoration but in terms of clarity, a kind of clarity that may be achieved through omission or exclusion of the non-essential.

Free Download GitHub Project

Anchor buttons

Default Primary Secondary Success Danger Warning Inverse Link
<a class="button is-default">Default</a>
<a class="button is-primary">Primary</a>
<a class="button is-secondary">Secondary</a>
<a class="button is-success">Success</a>
<a class="button is-danger">Danger</a>
<a class="button is-warning">Warning</a>
<a class="button is-inverse">Inverse</a>
<a class="button is-link">Link</a>

Form buttons

<input type="submit" class="button is-primary" value="type='submit'">
<input type="button" class="button is-secondary" value="type='button'">
<input type="reset" class="button is-danger" value="type='reset'">
<button class="button is-inverse">Button</button>

Disabled buttons

Default Primary Secondary Success Danger Warning Inverse Link
<a class="button is-default is-disabled">Default</a>
<a class="button is-primary is-disabled">Primary</a>
<a class="button is-secondary is-disabled">Secondary</a>
<a class="button is-success is-disabled">Success</a>
<a class="button is-danger is-disabled">Danger</a>
<a class="button is-warning is-disabled">Warning</a>
<a class="button is-inverse is-disabled">Inverse</a>
<a class="button is-link is-disabled">Link</a>

Icon buttons (Font Awesome Icons)

...and more!
<a class="button is-inverse has-fixed-icon"><i class="fa fa-gear"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-anchor"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-envelope"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-rss"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-location-arrow"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-tag"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-phone"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-heart"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-male"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-retweet"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-comment"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-camera"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-tasks"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-star"></i></a>
<a class="button is-inverse has-fixed-icon"><i class="fa fa-wrench"></i></a>

Icon buttons with text

Search Calendar Cloud Inbox Lock Random Map Signal ...and more!
<a class="button is-inverse has-icon-spacing"><i class="fa fa-search"></i> Search</a>
<a class="button is-inverse has-icon-spacing"><i class="fa fa-calendar"></i> Calendar</a>
<a class="button is-inverse has-icon-spacing"><i class="fa fa-cloud"></i> Cloud</a>
<a class="button is-inverse has-icon-spacing"><i class="fa fa-inbox"></i> Inbox</a>
<a class="button is-inverse has-icon-spacing"><i class="fa fa-lock"></i> Lock</a>
<a class="button is-inverse has-icon-spacing"><i class="fa fa-random"></i> Random</a>
<a class="button is-inverse has-icon-spacing"><i class="fa fa-map-marker"></i> Map</a>
<a class="button is-inverse has-icon-spacing"><i class="fa fa-signal"></i> Signal</a>

Button group

Based on the Law of Proximity from the Gestalt Laws of Perceptual Organization.

<div class="button-group-row">
  <div class="button-group pull-left">
    <a class="button is-success has-icon-spacing"><i class="fa fa-check"></i> New Email</a>
  </div><!-- /.button-group -->
  <div class="button-group pull-left">
    <a class="button is-default">Forward</a>
    <a class="button is-default">Archive</a>
    <a class="button is-default">Move</a>
  </div><!-- /.button-group -->
  <div class="button-group pull-left">
    <a class="button is-danger has-icon-spacing"><i class="fa fa-times"></i> Delete</a>
  </div><!-- /.button-group -->
</div><!-- /.button-group-row -->