1 files changed, 27 insertions, 38 deletions

diff --git a/less/buttons.less b/less/buttons.less
index 80d19494d..143ab42fd 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -109,7 +109,26 @@ input[type="button"] {
   }
 }
 
+// Mixin for darkening only enabled buttons for link states
+.darken-button-states (@background, @border) {
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: darken(@background, 5%);
+        border-color: darken(@border, 10%);
+  }
 
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: @background;
+          border-color: @border
+    }
+  }
+}
 
 // Alternate buttons
 // --------------------------------------------------
@@ -117,67 +136,37 @@ input[type="button"] {
 .btn {
   color: @btn-color;
   background-color: @btn-background;
-  border-color: @btn-border;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background, 5%);
-        border-color: darken(@btn-border, 10%);
-  }
+      border-color: @btn-border;
+  .darken-button-states(@btn-background, @btn-border)
 }
 .btn-primary {
   background-color: @btn-background-primary;
       border-color: @btn-border-primary;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-primary, 5%);
-        border-color: darken(@btn-border-primary, 10%);
-  }
+  .darken-button-states(@btn-background-primary, @btn-border-primary)
 }
-// Warning appears are orange
+// Warning appears as orange
 .btn-warning {
   background-color: @btn-background-warning;
       border-color: @btn-border-warning;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-warning, 5%);
-        border-color: darken(@btn-border-warning, 10%);
-  }
+  .darken-button-states(@btn-background-warning, @btn-border-warning)
 }
 // Danger and error appear as red
 .btn-danger {
   background-color: @btn-background-danger;
       border-color: @btn-border-danger;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-danger, 5%);
-        border-color: darken(@btn-border-danger, 10%);
-  }
+  .darken-button-states(@btn-background-danger, @btn-border-danger)
 }
 // Success appears as green
 .btn-success {
   background-color: @btn-background-success;
       border-color: @btn-border-success;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-success, 5%);
-        border-color: darken(@btn-border-success, 10%);
-  }
+  .darken-button-states(@btn-background-success, @btn-border-success)
 }
 // Info appears as blue-green
 .btn-info {
   background-color: @btn-background-info;
       border-color: @btn-border-info;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-info, 5%);
-        border-color: darken(@btn-border-info, 10%);
-  }
+  .darken-button-states(@btn-background-info, @btn-border-info)
 }