Testing Button Designs

public/styles/objects/_button.scss

@@ -35,7 +35,7 @@ $o-btn--padding: 1.5em;//Base Padding size.
 
   &__inner {
     position: relative;
-    background: white;
+    background: $s-color--btn-default__top;
     display: block;
     padding: ( $o-btn--padding / 2 ) $o-btn--padding;
     border-radius: $o-btn--padding / 3;
@@ -49,19 +49,44 @@ $o-btn--padding: 1.5em;//Base Padding size.
     }
   }
 
-  &:active {
-    .o-btn__inner {
-      @include t-translate-y($o-btn--padding / 4);
-      background: $s-color--btn-default-hover__top;
-    }
-  }
-
-  &:focus {
-    &::before,
-    .o-btn__inner {
-      //border-color: $s-color--btn-default__focus;
-    }
+  &:active &__inner {
+    @include t-translate-y($o-btn--padding / 4);
+    background: $s-color--btn-default-hover__top;
   }
 }
 
-//Custom Button Styles
+/*** Custom Button Styles ***/
+@mixin o-basic-button-design($top, $bottom) {
+  &::before,
+  &:active &__inner {
+    background: $bottom;
+  }
+
+  &__inner {
+    background: $top;
+  }
+}
+
+//Primary (Blue)
+.o-btn--style-primary {
+  @include o-basic-button-design(
+    $s-color--btn-primary__top,
+    $s-color--btn-primary__bottom
+  );
+}
+
+//Secondary (Light Blue)
+.o-btn--style-secondary {
+  @include o-basic-button-design(
+    $s-color--btn-secondary__top,
+    $s-color--btn-secondary__bottom
+  );
+}
+
+//Danger
+.o-btn--style-danger {
+  @include o-basic-button-design(
+    $s-color--btn-danger__top,
+    $s-color--btn-danger__bottom
+  );
+}

public/styles/settings/colors.scss

@@ -45,9 +45,20 @@ $s-color--loader: $s-color--swatch-blue;
 
 /*** Buttons and Inputs ***/
 //Button Default
-$s-color--btn-default__top: #E0E0E0;
+$s-color--btn-default__top: #F7F7F7;
 $s-color--btn-default__bottom: #DADADA;
 $s-color--btn-default__border: 1px solid #AAA;
-$s-color--btn-default__focus: $s-color--swatch-blue;
 
 $s-color--btn-default-hover__top: $s-color--btn-default__bottom;
+
+//Button Primary
+$s-color--btn-primary__top: $s-color--swatch-blue;
+$s-color--btn-primary__bottom: darken($s-color--btn-primary__top, 8%);
+
+//Btn Secondary
+$s-color--btn-secondary__top: $s-color--pastel-blue;
+$s-color--btn-secondary__bottom: darken($s-color--btn-secondary__top, 8%);
+
+//Btn Danger
+$s-color--btn-danger__top: $s-color--swatch-red;
+$s-color--btn-danger__bottom: darken($s-color--btn-danger__top, 8%);