diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 8ea2bb7649..6b924a5c6f 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -17,15 +17,12 @@
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
   @include transition($btn-transition);
 
-  &,
-  &:active,
-  &.active {
-    &:focus,
-    &.focus {
-      @include tab-focus();
-    }
+  &:focus,
+  &.focus {
+    @include tab-focus();
   }
 
+  // Share hover and focus styles
   @include hover-focus {
     text-decoration: none;
   }
@@ -33,19 +30,20 @@
     text-decoration: none;
   }
 
-  &:active,
-  &.active {
-    background-image: none;
-    outline: 0;
-    @include box-shadow($btn-active-box-shadow);
-  }
-
+  // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
     cursor: $cursor-disabled;
     opacity: .65;
     @include box-shadow(none);
   }
+
+  &:active,
+  &.active {
+    background-image: none;
+    outline: 0;
+    @include box-shadow($btn-active-box-shadow);
+  }
 }
 
 // Future-proof disabling of clicks on `<a>` elements
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 853a46bfc5..7a0a08a653 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -12,49 +12,34 @@
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
+  // Hover and focus styles are shared
   @include hover {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
+    border-color: $active-border;
   }
-
   &:focus,
   &.focus {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
+    border-color: $active-border;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    background-color: $background;
+    border-color: $border;
   }
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
+  .show > &.dropdown-toggle {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
-    // Remove the gradient for the pressed/active state
-    background-image: none;
+    border-color: $active-border;
+    background-image: none; // Remove the gradient for the pressed/active state
     @include box-shadow($btn-active-box-shadow);
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $color;
-      background-color: darken($background, 17%);
-          border-color: darken($border, 25%);
-    }
-  }
-
-  &.disabled,
-  &:disabled {
-    &:focus,
-    &.focus {
-      background-color: $background;
-          border-color: $border;
-    }
-    @include hover {
-      background-color: $background;
-          border-color: $border;
-    }
   }
 }
 
@@ -67,41 +52,28 @@
   @include hover {
     color: $color-hover;
     background-color: $color;
-        border-color: $color;
+    border-color: $color;
   }
 
   &:focus,
   &.focus {
     color: $color-hover;
     background-color: $color;
-        border-color: $color;
-  }
-
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
-    color: $color-hover;
-    background-color: $color;
-        border-color: $color;
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $color-hover;
-      background-color: darken($color, 17%);
-          border-color: darken($color, 25%);
-    }
+    border-color: $color;
   }
 
   &.disabled,
   &:disabled {
-    &:focus,
-    &.focus {
-      border-color: lighten($color, 20%);
-    }
-    @include hover {
-      border-color: lighten($color, 20%);
-    }
+    color: $color;
+    background-color: transparent;
+  }
+
+  &:active,
+  &.active,
+  .show > &.dropdown-toggle {
+    color: $color-hover;
+    background-color: $color;
+    border-color: $color;
   }
 }