Kanso - Buttons Component

Set of flat buttons written in CSS (Sass) and HTML. Font Awesome compatible.

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

Usage

Base

<a role="button" class="Button">Default</a>
<a role="button" class="Button Button--primary">Primary</a>
<a role="button" class="Button Button--secondary">Secondary</a>
<a role="button" class="Button Button--outline">Outline</a>
<a role="button" class="Button Button--link">Link</a>
<a role="button" class="Button Button--info">Info</a>
<a role="button" class="Button Button--success">Success</a>
<a role="button" class="Button Button--warning">Warning</a>
<a role="button" class="Button Button--error">Error</a>

Small

<a role="button" class="Button Button--small">Default</a>

Large

<a role="button" class="Button Button--large">Default</a>

Form

<input type="submit" role="button" class="Button Button--primary" value="type='submit'">
<input type="Button" role="button" class="Button Button--secondary" value="type='button'">
<input type="reset" role="button" class="Button Button--error" value="type='reset'">
<button type="button" role="button" class="Button Button--outline">button</button>

Disabled

<a role="button" class="Button is-disabled">Default</a>

Button + Font Awesome

<a role="button" class="Button"><i class="fa fa-fw fa-cloud"></i> Cloud</a>

Button w/out text + Font Awesome

<a role="button" class="Button"><i class="fa fa-fw fa-cloud"></i></a>

Horizontal Group + Button

<div class="ButtonGroup ButtonGroup--horizontal">
  <div class="ButtonGroup-item">
    <a role="button" class="Button">All</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline">Published</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline">Unpublished</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline">Drafts</a>
  </div>
</div>

Horizontal Group + Small Button + Font Awesome

<div class="ButtonGroup ButtonGroup--horizontal">
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--small Button--success"><i class="fa fa-fw fa-check"></i> New Email</a>
  </div>
</div>
<div class="ButtonGroup ButtonGroup--horizontal">
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--small Button--outline"><i class="fa fa-fw fa-mail-forward"></i> Forward</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--small Button--outline"><i class="fa fa-fw fa-archive"></i> Archive</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--small Button--outline"><i class="fa fa-fw fa-folder"></i> Move</a>
  </div>
</div>
<div class="ButtonGroup ButtonGroup--horizontal">
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--small Button--error"><i class="fa fa-fw fa-trash"></i> Delete</a>
  </div>
</div>

Horizontal Group + Button w/out text + Font Awesome

<div class="ButtonGroup ButtonGroup--horizontal">
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline"><i class="fa fa-fw fa-align-left"></i></a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline"><i class="fa fa-fw fa-align-justify"></i></a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline"><i class="fa fa-fw fa-align-right"></i></a>
  </div>
</div>
</div>

Vertical Group + Button

<div class="ButtonGroup ButtonGroup--vertical">
  <div class="ButtonGroup-item">
    <a role="button" class="Button">All</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline">Published</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline">Unpublished</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline">Drafts</a>
  </div>
</div>

Vertical Group + Small Button + Font Awesome

<div class="ButtonGroup ButtonGroup--vertical">
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--small Button--outline"><i class="fa fa-fw fa-euro"></i> EUR</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--small Button--outline"><i class="fa fa-fw fa-gbp"></i> GBP</a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--small Button--outline"><i class="fa fa-fw fa-dollar"></i> USD</a>
  </div>
</div>

Vertical Group + Button w/out text + Font Awesome

<div class="ButtonGroup ButtonGroup--vertical">
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline"><i class="fa fa-fw fa-bar-chart"></i></a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline"><i class="fa fa-fw fa-pie-chart"></i></a>
  </div>
  <div class="ButtonGroup-item">
    <a role="button" class="Button Button--outline"><i class="fa fa-fw fa-line-chart"></i></a>
  </div>
</div>

Support

IE8+

License & credits

The MIT License (MIT).

Font Awesome by Dave Gandy.