<link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet'>
  
<div class='buttons'>
  <h2>
    Simple Flat button generator
  </h2>
              <a class='btn' href='#'>Main Button</a>
              <a class='btn primary' href='#'>Primary Button</a>
              <a class='btn secondary' href='#'>Secondary Button</a>
              <a class='btn quiet' href='#'>Quiet Button</a>
              <a class='btn neutral' href='#'>Neutral Button</a>
              <hr>
              <a class='btn neutral small' href='#'>Small Neutral Button</a>
              <hr>
              <a class='btn secondary tiny' href='#'>Tiny Secondary Button</a>
              <hr>
              <a class='btn border' href='#'>Main Button with border</a>
              <a class='btn primary border' href='#'>Primary Button with border</a>
              <a class='btn secondary border' href='#'>Secondary Button with border</a>
              <a class='btn quiet border' href='#'>Quiet Button with border</a>
              <a class='btn neutral border' href='#'>Neutral Button with border</a>
            </div>

@import compass

// Em Font size
$em-base: 16px !default
// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) Borrowed from Zurb's Foundation 4
@function emCalc($pxWidth)
  @return $pxWidth / $em-base * 1em

// Color Swatches
$solid: #445555 
$primary: #DD4B39
$secondary: #2795b6
$quiet: #F1F1F1
$neutral: #777777
$body-color: #fff

//Some reset
*
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  box-sizing: border-box
  &:before, &:after
    -moz-box-sizing: border-box
    -webkit-box-sizing: border-box
    box-sizing: border-box
 
body
  color: #445555
  cursor: default
  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif
  font-size: 16px
  font-style: normal
  font-weight: 400
  line-height: 24px
hr
  border-color: #DDDDDD
  border-image: none
  border-style: solid
  border-width: 1px 0 0
  clear: both
  height: 0
  margin: 1.25em 0 1.188em
 
.buttons
  margin-top: emCalc(30px)
  h2
    text-align: center
    font-weight: lighter
    font-size: emCalc(40px)
    margin-bottom: emCalc(20px)
    
//The main button
.btn
  border: 0 none
  border-radius: 6px 6px 6px 6px
  color: #FFFFFF
  cursor: pointer
  +inline-block
  font-size: emCalc(18px)
  font-family: "Lato","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif
  margin: 0  emCalc(10px)
  outline: 0 none
  text-decoration: none
  line-height: inherit
  padding: emCalc(14px) emCalc(18px)
  margin-bottom: emCalc(10px)
  &:hover
    color: #fff

// The button Constructor
$button-list: btn $solid, primary $primary, secondary $secondary, quiet darken($quiet, 10), neutral $neutral
@each $button in $button-list
  .btn
    $style: nth($button, 1)
    $color: nth($button, 2)
    @extend .btn
    &.#{$style}
      background: $color
      &:hover
        background: lighten($color, 10)
      &.border
        border: 3px solid $body-color
        box-shadow: 0 0 0 3px $color
        &:hover
          box-shadow: 0 0 0 3px lighten($color, 10)
      &.small
        padding: emCalc(12px) emCalc(10px)
        font-size: emCalc(14px)
      &.tiny
        padding: emCalc(6px) emCalc(8px)
        font-size: emCalc(12px)