Kanso - Semantic Flat Buttons

Set of semantic flat buttons written in CSS and HTML. SASS and LESS source code available.

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.

Live demo

Support: IE8+ and modern browsers

Note: by default this project supports SASS. If you want to use LESS please change GruntJS configuration.

Usage

Anchor buttons

<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-link">Link</a>

Form buttons

<input type="submit" class="button is-default" value="Submit">
<input type="button" class="button is-default" value="Button">
<input type="reset" class="button is-default" value="Reset">
<button class="button is-default">Button</button>

Disabled buttons

<a class="button is-default is-disabled">Disabled</a>

Icon buttons - (Font Awesome Icons)

<a class="button is-default"><i class="icon icon-search"></i></a>

Icon buttons with text

<a class="button is-default has-icon-spacing"><i class="icon icon-search"></i> Search</a>

Button group

<div class="button-group-row">
  <div class="button-group pull-left">
    <a class="button is-success has-icon-spacing"><i class="icon-ok"></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">Delete</a>
  </div><!-- /.button-group -->
</div><!-- /.button-group-row -->

License & credits

The MIT License (MIT).

Font Awesome Icons by Dave Gandy.