diff --git a/docs/assets/scss/mdb/_clipboard-js.scss b/docs/assets/scss/mdb/_clipboard-js.scss
index 1093ee91..112fffa9 100644
--- a/docs/assets/scss/mdb/_clipboard-js.scss
+++ b/docs/assets/scss/mdb/_clipboard-js.scss
@@ -5,6 +5,6 @@
 
   &:hover {
     color: $gray; // #fff;
-    background-color: $mdb-btn-hover-bg; // #027de7;
+    background-color: $mdb-btn-focus-bg; // #027de7;
   }
 }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 031a2323..4c3773ee 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -18,18 +18,11 @@
 
   @include undo-bs-tab-focus();
 
-  // kill focus outline on firefox
-  //button::-moz-focus-inner {
-  //  border: 0;
-  //}
-
-
-
   //--
   // Colors
 
   // flat removes bg, add color variations to text
-  @include mdb-button-color();
+  @include mdb-flat-button-color();
 
   // fab and raised
   //  - colored, add their text and bg
@@ -38,13 +31,8 @@
   &.mdb-btn-fab,
   &.btn-raised,
   .btn-group-raised & {
-    @include mdb-button-colored();
+    @include mdb-raised-button-color();
 
-    // contrast bg colors on hover, focus, active
-    @include mdb-hover-focus-active() {
-      @include mdb-button-colored-bg(true);
-      //border: 1px solid $red;
-    }
     // enlarged shadow on hover, focus
     @include hover-focus() {
       //border: 1px solid $blue;
@@ -147,7 +135,7 @@
   @include mdb-disabled() {
     color: $mdb-btn-disabled;
     .bg-inverse & {
-      color: $mdb-btn-disabled-inverse;
+      color: $mdb-inverse-btn-disabled;
     }
 
     // flat buttons shouldn't lose transparency on disabled hover/focus
@@ -156,17 +144,6 @@
     &:focus {
       background: transparent;
     }
-
-    // no box-shadow on raised - need specificity
-    //&.btn-raised,
-    //&.btn-group-raised {
-    //  &,
-    //  &.active,
-    //  &:active,
-    //  &:focus:not(:active) {
-    //    box-shadow: none;
-    //  }
-    //}
   }
 }
 
@@ -178,15 +155,14 @@
   margin: 10px 1px;
 
   // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
-  &.open {
-    .dropdown-toggle {
-      //box-shadow: none;
-    }
-
-    > .dropdown-toggle.btn {
-      @include mdb-button-colored-bg();
-    }
-  }
+  //&.open {
+  //  .dropdown-toggle {
+  //  }
+  //
+  //  > .dropdown-toggle.btn {
+  //    @include mdb-raised-button-color-bg();
+  //  }
+  //}
 
   .dropdown-menu {
     border-radius: 0 0 $border-radius $border-radius;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 5885f322..916f590a 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -1,113 +1,158 @@
-@mixin mdb-button-variant($color: null, $bg-color: null, $border-color: null) {
-  @if ($color) {
+// from bs mixins/buttons button-variant
+@mixin mdb-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) {
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+
+  @include hover {
     color: $color;
+    background-color: $focus-background;
+    border-color: $focus-border;
   }
 
-  @if ($bg-color) {
-    background-color: $bg-color;
+  &:focus,
+  &.focus {
+    color: $color;
+    background-color: $focus-background;
+    border-color: $focus-border;
   }
 
-  @if ($border-color) {
-    border-color: $border-color;
-  }
-}
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $color;
+    background-color: $focus-background;
+    border-color: $focus-border;
 
-@mixin mdb-button-color() {
-
-  @include hover-focus {
-    background-color: $mdb-btn-hover-bg;
-
-    .bg-inverse & {
-      background-color: $mdb-btn-hover-bg-inverse;
-    }
-
-    // reverse the above for links
-    &.btn-link {
-      background-color: transparent;
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $color;
+      background-color: $active-background;
+      border-color: $active-border;
     }
   }
 
-  // default
-  //@include mdb-button-variant($mdb-btn-color, $mdb-btn-bg, $mdb-btn-border);
-
-  // flat bg with text color variations
-  &.btn-primary {
-    @include mdb-button-variant($btn-primary-bg);
-  }
-  &.btn-secondary {
-    @include mdb-button-variant($btn-secondary-color);
-  }
-  &.btn-info {
-    @include mdb-button-variant($btn-info-bg);
-  }
-  &.btn-success {
-    @include mdb-button-variant($btn-success-bg);
-  }
-  &.btn-warning {
-    @include mdb-button-variant($btn-warning-bg);
-  }
-  &.btn-danger {
-    @include mdb-button-variant($btn-danger-bg);
+  &.disabled,
+  &:disabled {
+    &:focus,
+    &.focus {
+      background-color: $background;
+      border-color: $border;
+    }
+    @include hover {
+      background-color: $background;
+      border-color: $border;
+    }
   }
 }
 
-@mixin mdb-button-colored() {
+@mixin mdb-flat-button-variant($color) {
 
-  &.btn-primary {
-    @include mdb-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
-  }
-  &.btn-secondary {
-    @include mdb-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
-  }
-  &.btn-info {
-    @include mdb-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
-  }
-  &.btn-success {
-    @include mdb-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-  }
-  &.btn-warning {
-    @include mdb-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
-  }
-  &.btn-danger {
-    @include mdb-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
-  }
-}
+  $background: $mdb-btn-bg;
+  $border: $mdb-btn-border;
 
-@mixin mdb-button-bg($color, $contrast: false) {
-  @if ($contrast) { // contrast for focus indication
-    // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
-    background-color: contrast-color($color, darken($color, 4%), lighten($color, 4%));
-  } @else {
-    background-color: $color;
+  $focus-background: $mdb-btn-focus-bg;
+  $focus-border: $mdb-btn-focus-bg;
+
+  $active-background: $mdb-btn-active-bg;
+  $active-border: $mdb-btn-active-bg;
+
+  @include mdb-button-variant($color,
+    $background,
+    $focus-background,
+    $active-background,
+    $border,
+    $focus-border,
+    $active-border);
+
+  // inverse color scheme
+  .bg-inverse & {
+    $focus-background: $mdb-inverse-btn-focus-bg;
+    $focus-border: $mdb-inverse-btn-focus-bg;
+
+    $active-background: $mdb-inverse-btn-active-bg;
+    $active-border: $mdb-inverse-btn-active-bg;
+
+    @include mdb-button-variant($color,
+      $background,
+      $focus-background,
+      $active-background,
+      $border,
+      $focus-border,
+      $active-border);
   }
-}
 
-@mixin mdb-button-colored-bg($contrast: false) {
-  // default
-  @include mdb-button-bg($mdb-btn-bg, $contrast);
-
-  // no bg for links
+  // reverse the above for links
   &.btn-link {
     background-color: transparent;
   }
+}
 
+@mixin mdb-flat-button-color() {
+
+  @include mdb-flat-button-variant($mdb-btn-color);
+
+  // flat bg with text color variations
   &.btn-primary {
-    @include mdb-button-bg($btn-primary-bg, $contrast);
+    @include mdb-flat-button-variant($btn-primary-bg);
   }
   &.btn-secondary {
-    @include mdb-button-bg($btn-secondary-bg, $contrast);
+    @include mdb-flat-button-variant($btn-secondary-color);
   }
   &.btn-info {
-    @include mdb-button-bg($btn-info-bg, $contrast);
+    @include mdb-flat-button-variant($btn-info-bg);
   }
   &.btn-success {
-    @include mdb-button-bg($btn-success-bg, $contrast);
+    @include mdb-flat-button-variant($btn-success-bg);
   }
   &.btn-warning {
-    @include mdb-button-bg($btn-warning-bg, $contrast);
+    @include mdb-flat-button-variant($btn-warning-bg);
   }
   &.btn-danger {
-    @include mdb-button-bg($btn-danger-bg, $contrast);
+    @include mdb-flat-button-variant($btn-danger-bg);
+  }
+}
+
+@mixin mdb-raised-button-variant($color, $background, $border) {
+
+  // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
+  $focus-background: contrast-color($background, darken($background, 4%), lighten($background, 4%));
+  //$focus-background: darken($background, 10%);  // default bootstrap
+  $focus-border: darken($border, 12%);
+
+  $active-background: $focus-background;
+  //$active-background: darken($background, 17%);
+  $active-border: darken($border, 25%);
+
+  @include mdb-button-variant($color,
+    $background,
+    $focus-background,
+    $active-background,
+    $border,
+    $focus-border,
+    $active-border);
+}
+
+@mixin mdb-raised-button-color() {
+
+  &.btn-primary {
+    @include mdb-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+  }
+  &.btn-secondary {
+    @include mdb-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+  }
+  &.btn-info {
+    @include mdb-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+  }
+  &.btn-success {
+    @include mdb-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+  }
+  &.btn-warning {
+    @include mdb-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+  }
+  &.btn-danger {
+    @include mdb-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
   }
 }
 
diff --git a/scss/variables/bootstrap/_buttons.scss b/scss/variables/bootstrap/_buttons.scss
index 16244df0..22449282 100644
--- a/scss/variables/bootstrap/_buttons.scss
+++ b/scss/variables/bootstrap/_buttons.scss
@@ -9,12 +9,13 @@ $mdb-btn-color:            $gray-dark !default;
 $mdb-btn-bg:               $body-bg !default; // #fff
 $mdb-btn-border:           #ccc !default;
 
-$mdb-btn-colored-bg-text: $gray-dark !default;
-
-$mdb-btn-hover-bg: rgba(#999, .20) !default; // spec: flat/light bg Hover: 20% #999999
+$mdb-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999
+$mdb-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999
 $mdb-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black
-$mdb-btn-hover-bg-inverse: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
-$mdb-btn-disabled-inverse: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
+
+$mdb-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
+$mdb-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC
+$mdb-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
 
 $mdb-btn-fab-size: 56px !default;
 $mdb-btn-fab-size-mini: 40px !default;