diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index d6e5b4af7f..13ecab6d7b 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/app/webpacker/css/admin_v3/components/buttons.scss
@@ -1,3 +1,13 @@
+@mixin disabled-button() {
+  &:disabled,
+  &:disabled:hover {
+    cursor: initial;
+    color: $color-btn-disabled-text;
+    background-color: $color-btn-disabled-bg;
+    border-color: transparent;
+  }
+}
+
 input[type="submit"],
 input[type="reset"],
 input[type="button"]:not(.trix-button),
@@ -15,6 +25,7 @@ button:not(.plain):not(.trix-button),
   line-height: $btn-regular-height - 2px; // remove 2px to compensate for border
   height: $btn-regular-height;
   font-weight: bold;
+  @include disabled-button();
 
   &:before {
     font-weight: normal !important;
@@ -100,6 +111,7 @@ button:not(.plain):not(.trix-button),
   &.red {
     background-color: $color-btn-red-bg;
     border-color: $color-btn-red-bg;
+    @include disabled-button(); // required for specifity
 
     &:hover {
       background-color: $color-btn-red-hover-bg;
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index 73a32c877b..a85da4fcc6 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -44,7 +44,8 @@ $color-btn-shadow:               0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rg
 $color-btn-hover-bg:             $orient !default;
 $color-btn-hover-text:           $white !default;
 $color-btn-hover-border:         $dark-blue !default;
-$color-btn-disabled-bg:          $light-grey !default;
+$color-btn-disabled-bg:          $medium-grey !default;
+$color-btn-disabled-text:        $lighter-grey !default;
 $color-btn-red-bg:               $red !default;
 $color-btn-red-hover-bg:         $roof-terracotta !default;