Buttons.css

/***
  title: Buttons
  section: Buttons
  description: Very pretty square buttons
  exampleVariables: 
    buttons: "btn-.*"
  example: |
    <f:for each="{buttons.combinations} as="combinationClass">
      <a href="" class="btn {combinationClass}">{combinationClass}</a>
    </f:for>

    => 
      <a href="" class="btn btn-small btn-red btn-block">{combinationClass}</a>
      <a href="" class="btn btn-normal btn-red btn-block">{combinationClass}</a>
      <a href="" class="btn btn-large btn-red btn-block">{combinationClass}</a>
      <a href="" class="btn btn-huge btn-red btn-block">{combinationClass}</a>
      <a href="" class="btn btn-small btn-blue btn-block">{combinationClass}</a>
      <a href="" class="btn btn-normal btn-blue btn-block">{combinationClass}</a>
      <a href="" class="btn btn-large btn-blue btn-block">{combinationClass}</a>
      <a href="" class="btn btn-huge btn-blue btn-block">{combinationClass}</a>
      ...
***/

.btn {...}

/***
  title: Button Sizes
  tags: buttons, sizes
  description: Various button Sized
  example: |
    <a href="" class="btn {class}">{class}</a>
***/
.btn-small {...}
.btn-normal {...}
.btn-large {...}
.btn-huge {...}

/***
  title: Button Colours
  tags: buttons, colours
  description: Various button colours
  example: |
    <a href="" class="btn {class}">{class}</a>
***/
.btn-red {...}
.btn-blue {...}
.btn-pink {...}
.btn-purple {...}

/***
  title: Button Variants
  tags: buttons, variants
  description: Various button variants
  example: |
    <a href="" class="btn {class}">{class}</a>
***/
.btn-block {...}
.btn-inline {...}
.btn-inline-block {...}