renxtocarvalho / kanso

Semantic Flat Buttons

Kanso - Semantic Flat Buttons

Set of semantic flat buttons written in LESS CSS preprocessor and HTML.

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

Usage

Anchor buttons

<a class="button">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" value="Submit">
<input type="button" class="button" value="Button">
<input type="reset" class="button" value="Reset">
<button class="button">Button</button>

Disabled buttons

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

Embossed buttons

<a class="button is-embossed">Embossed</a>

Icon buttons - HiDPI ready

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

Icon buttons with text

<a class="button has-icon has-text"><i class="icon-search"></i>Search</a>

Button group

<div class="button-group-row">
  <div class="button-group">
    <a class="button is-success has-icon has-text"><i class="icon-check"></i>New Email</a>
  </div><!-- /.button-group -->
  <div class="button-group">
    <a class="button">Forward</a>
    <a class="button">Archive</a>
    <a class="button">Move</a>
  </div><!-- /.button-group -->
  <div class="button-group">
    <a class="button is-danger">Delete</a>
  </div><!-- /.button-group -->
</div><!-- /.button-group-row -->

License

You are free to use Kanso Semantic Flat Buttons (the "Button Set") or any part thereof (the "Buttons") in any personal, open-source or commercial work without obligation of payment (monetary or otherwise) or attribution.

Do not sell, sub-license, rent, transfer, host, redistribute the Button Set. (either in existing or modified form).

Attribution is optional but it is always appreciated.

Intellectual property rights are not transferred with the download of the buttons.

ALL BUTTONS LICENSED ARE PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED. KRIS OLSZEWSKI IS NOT LIABLE FOR ANY DAMAGES ARISING OUT OF ANY DEFECTS IN THIS MATERIAL.

YOU AGREE TO HOLD KRIS OLSZEWSKI HARMLESS FOR ANY RESULT THAT MAY OCCUR DURING THE COURSE OF USING, OR INABILITY TO USE THESE LICENSED BUTTONS.

IN NO EVENT SHALL KRIS OLSZEWSKI BE LIABLE FOR ANY DAMAGES INCLUDING, BUT NOT LIMITED TO, DIRECT, INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES OR OTHER LOSSES ARISING OUT OF THE USE OF OR INABILITY TO USE THIS PRODUCTS.

Credits

Metrize Icons by Alessio Atzeni.