diff --git a/packages/core/src/components/button/_button.scss b/packages/core/src/components/button/_button.scss
index 343a27ad99..e0b2286914 100644
--- a/packages/core/src/components/button/_button.scss
+++ b/packages/core/src/components/button/_button.scss
@@ -50,7 +50,8 @@ Styleguide components.button.css
   @include pt-button-base();
   @include pt-button-height($pt-button-height);
 
-  &:disabled {
+  &:disabled,
+  &.pt-disabled {
     cursor: not-allowed;
   }
 
@@ -68,6 +69,10 @@ Styleguide components.button.css
     }
   }
 
+  &[class*="pt-intent-"] .pt-button-spinner .pt-spinner-head {
+    stroke: $white;
+  }
+
   &.pt-loading {
     position: relative;
 
@@ -87,7 +92,6 @@ Styleguide components.button.css
     }
   }
 
-
   /*
   Buttons with icons
 
@@ -169,10 +173,15 @@ Styleguide components.button.css
 
     &[class*="pt-intent-"] {
       @include pt-dark-button-intent();
+
+      .pt-button-spinner .pt-spinner-head {
+        stroke: $dark-progress-head-color;
+      }
     }
   }
 
   &:disabled,
+  &.pt-disabled,
   &[class*="pt-intent-"] {
     // disabled and intent button icon should use same color as text
     // stylelint-disable declaration-no-important
@@ -240,7 +249,7 @@ Styleguide components.button.css
   }
 }
 
-%pt-button-link {
+a.pt-button {
   text-align: center;
   text-decoration: none;
   transition: none;
@@ -257,31 +266,6 @@ Styleguide components.button.css
   }
 }
 
-a.pt-button {
-  @extend %pt-button-link;
-}
-
-.pt-button.pt-active {
-  // .pt-active should function identically to :active pseudo-class
-  // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-  @extend .pt-button:active;
-
-  &.pt-disabled,
-  &:disabled {
-    background: $button-background-color-active-disabled;
-
-    .pt-dark & {
-      background: $dark-button-background-color-active-disabled;
-    }
-  }
-}
-
-.pt-button.pt-disabled {
-  // make .pt-disabled class have same effect as :disabled state
-  // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-  @extend .pt-button:disabled;
-}
-
 /*
 JavaScript API
 
diff --git a/packages/core/src/components/button/_common.scss b/packages/core/src/components/button/_common.scss
index 86e961afea..0cd32133ad 100644
--- a/packages/core/src/components/button/_common.scss
+++ b/packages/core/src/components/button/_common.scss
@@ -65,15 +65,17 @@ $button-color-disabled: $pt-text-color-disabled !default;
 $button-background-color: $light-gray5 !default;
 $button-background-color-hover: $light-gray4 !default;
 $button-background-color-active: $light-gray2 !default;
-$button-background-color-disabled: rgba($gray5, 0.5) !default;
-$button-background-color-active-disabled: rgba($gray5, 0.7) !default;
+$button-background-color-disabled: rgba($light-gray1, 0.5) !default;
+$button-background-color-active-disabled: rgba($light-gray1, 0.7) !default;
+$button-intent-color-disabled: rgba($white, 0.6);
 
 $dark-button-color-disabled: $pt-dark-text-color-disabled !default;
 $dark-button-background-color: $dark-gray5 !default;
 $dark-button-background-color-hover: $dark-gray4 !default;
 $dark-button-background-color-active: $dark-gray2 !default;
-$dark-button-background-color-disabled: rgba($gray1, 0.5) !default;
-$dark-button-background-color-active-disabled: rgba($gray1, 0.7) !default;
+$dark-button-background-color-disabled: rgba($dark-gray5, 0.5) !default;
+$dark-button-background-color-active-disabled: rgba($dark-gray5, 0.7) !default;
+$dark-button-intent-color-disabled: rgba($white, 0.3);
 
 $minimal-button-divider-width: 1px !default;
 
@@ -120,21 +122,26 @@ $button-intents: (
     @include pt-button-hover();
   }
 
-  &:active {
+  &:active,
+  &.pt-active {
     @include pt-button-active();
   }
 
-  &:disabled {
+  &:disabled,
+  &.pt-disabled {
     outline: none;
     box-shadow: none;
     background-color: $button-background-color-disabled;
     background-image: none;
     cursor: not-allowed;
     color: $button-color-disabled;
+
+    &.pt-active {
+      background: $button-background-color-active-disabled;
+    }
   }
 }
 
-
 @mixin pt-button-hover() {
   @include linear-gradient-with-fallback(
     rgba($white, 0.5),
@@ -164,7 +171,9 @@ $button-intents: (
 
   &:hover,
   &:active,
-  &:disabled {
+  &.pt-active,
+  &:disabled,
+  &.pt-disabled {
     color: $white;
   }
 
@@ -178,21 +187,20 @@ $button-intents: (
     box-shadow: $button-intent-box-shadow;
   }
 
-  &:active {
+  &:active,
+  &.pt-active {
     box-shadow: $button-intent-box-shadow-active;
     background-color: $active-color;
     background-image: none;
   }
 
-  &:disabled {
+  &:disabled,
+  &.pt-disabled {
     border-color: transparent;
     box-shadow: none;
     background-color: rgba($default-color, 0.5);
     background-image: none;
-  }
-
-  .pt-button-spinner .pt-spinner-head {
-    stroke: $white;
+    color: $button-intent-color-disabled;
   }
 }
 
@@ -207,7 +215,8 @@ $button-intents: (
   color: $pt-dark-text-color;
 
   &:hover,
-  &:active {
+  &:active,
+  &.pt-active {
     color: $pt-dark-text-color;
   }
 
@@ -215,15 +224,21 @@ $button-intents: (
     @include pt-dark-button-hover();
   }
 
-  &:active {
+  &:active,
+  &.pt-active {
     @include pt-dark-button-active();
   }
 
-  &:disabled {
+  &:disabled,
+  &.pt-disabled {
     box-shadow: none;
     background-color: $dark-button-background-color-disabled;
     background-image: none;
     color: $dark-button-color-disabled;
+
+    &.pt-active {
+      background: $dark-button-background-color-active-disabled;
+    }
   }
 
   .pt-button-spinner .pt-spinner-head {
@@ -255,18 +270,16 @@ $button-intents: (
     box-shadow: $dark-button-intent-box-shadow;
   }
 
-  &:active {
+  &:active,
+  &.pt-active {
     box-shadow: $dark-button-intent-box-shadow-active;
   }
 
-  &:disabled {
+  &:disabled,
+  &.pt-disabled {
     box-shadow: none;
     background-image: none;
-    color: rgba($white, 0.3);
-  }
-
-  .pt-button-spinner .pt-spinner-head {
-    stroke: $dark-progress-head-color;
+    color: $dark-button-intent-color-disabled;
   }
 }
 
@@ -282,16 +295,17 @@ $button-intents: (
     color: $pt-text-color;
   }
 
-  &.pt-active,
-  &:active {
+  &:active,
+  &.pt-active {
     box-shadow: none;
     background: $minimal-button-background-color-active;
     color: $pt-text-color;
   }
 
-  &.pt-disabled,
   &:disabled,
-  &:disabled:hover {
+  &:disabled:hover,
+  &.pt-disabled,
+  &.pt-disabled:hover {
     background: inherit;
     cursor: not-allowed;
     color: $pt-text-color-disabled;
@@ -334,9 +348,10 @@ $button-intents: (
     color: $pt-dark-text-color;
   }
 
-  &.pt-disabled,
   &:disabled,
-  &:disabled:hover {
+  &:disabled:hover,
+  &.pt-disabled,
+  &.pt-disabled:hover {
     background: inherit;
     cursor: not-allowed;
     color: $pt-dark-text-color-disabled;