<div class="container">
  <h1>Simple Flat Buttons</h1>
  <div class="row">
    <div class="col-12">
      <h2>Flat</h2>
      <button class="btn btn-square btn-lg btn-filled-green">Register</button>
      <button class="btn btn-square btn-md btn-filled-red">Clear</button>
      <button class="btn btn-square btn-sm btn-filled-blue">Submit</button>
    </div>
    <div class="col-12">
      <h2>Round</h2>
      <button class="btn btn-round btn-lg btn-filled-orange">Register</button>
      <button class="btn btn-round btn-md btn-filled-yellow">Clear</button>
      <button class="btn btn-round btn-sm btn-filled-grey">Submit</button>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <h2>Flat Ghost</h2>
      <button class="btn btn-square btn-lg btn-ghost-green">Register</button>
      <button class="btn btn-square btn-md btn-ghost-red">Clear</button>
      <button class="btn btn-square btn-sm btn-ghost-blue">Submit</button>
    </div>
    <div class="col-12">
      <h2>Round ghost</h2>
      <button class="btn btn-round btn-lg btn-ghost-orange">Register</button>
      <button class="btn btn-round btn-md btn-ghost-yellow">Clear</button>
      <button class="btn btn-round btn-sm btn-ghost-grey">Submit</button>
    </div>
  </div>
</div>

@import "compass";
@import "https://fonts.googleapis.com/css?family=Ubuntu:400";
@import url(https://fonts.googleapis.com/css?family=Lobster);

$green-color: #2ecc71;
$red-color: #e74c3c;
$yellow-color: #f1c40f;
$orange-color: #e67e22;
$blue-color: #3498db;
$grey-color: #7f8c8d;
$white-color: #fff;
$border-radius: 20px;

$button-padding: 15px;

h1 {
  font-family: 'Lobster', cursive;
  font-weight:300;
  font-size: 2.5em;
}

@mixin column($size) {
    width: (100%/12)*$size;
}

@mixin button-filled($color) {
    background-color: $color;
    
    &:hover {
        background-color: darken($color, 10);
    }
    
    &:active {
        @include box-shadow(inset 0 0 100px darken($color, 20));
    }
}

@mixin button-ghost($color) {
    border: 2px solid $color;
    
    &:hover {
        background-color: $color;
    }
    
    &:active {
        background-color: darken($color, 10);
    }
}

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

body {
    background-color: #34495e;
    color: #fff;
    margin:1em;
}

.btn:not(last-child) {
  margin-right:1em;
}

h2 {
    padding-bottom:1em;
    padding-top: 1em;
    color: #fff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}

.btn {
    color: $white-color;   
    background-color: transparent;
    outline:0;
    @include transition(background-color 0.3s ease);
    font-family: 'Ubuntu', sans-serif;
}

.btn-square {
    border:0;
}

.btn-round {
    border:0;
    @include border-radius($border-radius);
}

.btn-lg {
    padding: $button-padding/1.5 $button-padding*2.5 $button-padding/1.5 $button-padding*2.5;
    font-size: 1.2em;
}

.btn-md {
    padding: $button-padding/2 $button-padding*2 $button-padding/2 $button-padding*2;
    font-size: 1em;
}

.btn-sm {
    padding: $button-padding/2.5 $button-padding*1.5 $button-padding/2.5 $button-padding*1.5;
    font-size: 0.8em;
}

.btn-filled-green {
    @include button-filled($green-color);
}

.btn-filled-blue {
    @include button-filled($blue-color);
}

.btn-filled-red {
    @include button-filled($red-color);
}

.btn-filled-orange {
    @include button-filled($orange-color);
}

.btn-filled-yellow {
    @include button-filled($yellow-color);
}

.btn-filled-grey {
    @include button-filled($grey-color);
}

.btn-ghost-green {
    @include button-ghost($green-color);
}

.btn-ghost-blue {
    @include button-ghost($blue-color);
}

.btn-ghost-red {
    @include button-ghost($red-color);
}

.btn-ghost-orange {
    @include button-ghost($orange-color);
}

.btn-ghost-yellow {
    @include button-ghost($yellow-color);
}

.btn-ghost-grey {
    @include button-ghost($grey-color);
}

h2 {
    color: #fff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}

.btn {
    color: $white-color;   
    background-color: transparent;
    outline:0;
    @include transition(background-color 0.3s ease);
    font-family: 'Ubuntu', sans-serif;
}

.btn-square {
    border:0;
}

.btn-round {
    border:0;
    @include border-radius($border-radius);
}

.btn-lg {
    padding: $button-padding/1.5 $button-padding*2.5 $button-padding/1.5 $button-padding*2.5;
    font-size: 1.2em;
}

.btn-md {
    padding: $button-padding/2 $button-padding*2 $button-padding/2 $button-padding*2;
    font-size: 1em;
}

.btn-sm {
    padding: $button-padding/2.5 $button-padding*1.5 $button-padding/2.5 $button-padding*1.5;
    font-size: 0.8em;
}

.btn-filled-green {
    @include button-filled($green-color);
}

.btn-filled-blue {
    @include button-filled($blue-color);
}

.btn-filled-red {
    @include button-filled($red-color);
}

.btn-filled-orange {
    @include button-filled($orange-color);
}

.btn-filled-yellow {
    @include button-filled($yellow-color);
}

.btn-filled-grey {
    @include button-filled($grey-color);
}

.btn-ghost-green {
    @include button-ghost($green-color);
}

.btn-ghost-blue {
    @include button-ghost($blue-color);
}

.btn-ghost-red {
    @include button-ghost($red-color);
}

.btn-ghost-orange {
    @include button-ghost($orange-color);
}

.btn-ghost-yellow {
    @include button-ghost($yellow-color);
}

.btn-ghost-grey {
    @include button-ghost($grey-color);
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}

.row:before, 
.row:after {
    content:"";
    display: table ;
    clear:both;
}

.col-6 {
    @include column(6);
    float: left;
    min-height:1px;
}

.col-12 {
  @include column(12);
  min-height:1px;
  text-align:center;
}

*, *:before, *:after {
  padding:0;
  margin:0;
}