button ghost added

sass/_config/_variables.scss

@@ -40,6 +40,7 @@ $color-info     : #5BC0DE;
 $color-warning  : #F0AD4E;
 $color-danger   : #D9534F;
 $color-inverse  : #292B2C;
+$color-ghost    : transparent;
 $color-muted    : #F7F7F7;
 
 // colors used in project

sass/components/buttons.scss

@@ -36,32 +36,36 @@ button {
     -webkit-tap-highlight-color: transparent;
   }
 }
+
 // button color variants
-$buttons: (
+$buttons-variants: (
-        primary: $color-primary,
+  (primary,    $color-primary,    $color-light,    none),
-        success: $color-success,
+  (success,    $color-success,    $color-light,    none),
-        info: $color-info,
+  (info,       $color-info,       $color-light,    none),
-        warning: $color-warning,
+  (warning,    $color-warning,    $color-light,    none),
-        danger: $color-danger,
+  (danger,     $color-danger,     $color-light,    none),
-        inverse: $color-inverse
+  (inverse,    $color-inverse,    $color-light,    none),
+  (ghost,      $color-ghost,      $color-light,    0 0 0 1px $color-light inset)
 );
 
 .btn,
 .button {
-  @each $variant, $color in $buttons {
+  @each $name, $background-color, $color, $border in $buttons-variants {
-    &--#{$variant} {
+    &--#{$name} {
       @extend %btn;
-      background-color: $color;
+      background-color: $background-color;
-      color: $color-light;
+      color: $color;
+      box-shadow: $border;
 
       &:active,
       &:focus,
       &:hover {
-        background-color: darken( $color, 10% );
+        background-color: darken( $background-color, 10% );
       }
     }
   }
 }
+
 // button state variants
 .btn,
 .button {
@@ -78,6 +82,7 @@ $buttons: (
     display: block;
   }
 }
+
 /* disabled buttons */
 .btn,
 .button,
@@ -91,6 +96,7 @@ button {
     cursor: not-allowed;
   }
 }
+
 /* unstyled buttons */
 .btn,
 .button,