diff --git a/assets/css/src/generic/_buttons.scss b/assets/css/src/generic/_buttons.scss
index 468b7ace83..e2c5a4affd 100644
--- a/assets/css/src/generic/_buttons.scss
+++ b/assets/css/src/generic/_buttons.scss
@@ -119,3 +119,16 @@
     background-color: rgba(#fff, .8);
   }
 }
+
+.mailpoet-button-disabled {
+  color: rgba(#fff, .4);
+  pointer-events: none;
+  touch-action: none;
+
+  &.mailpoet-button-secondary,
+  &.mailpoet-button-tertiary {
+    background: #eaeaea;
+    border-color: #eaeaea;
+    color: #828282;
+  }
+}
diff --git a/assets/js/src/common/button/button.tsx b/assets/js/src/common/button/button.tsx
index fe20989268..f76006b65d 100644
--- a/assets/js/src/common/button/button.tsx
+++ b/assets/js/src/common/button/button.tsx
@@ -52,7 +52,7 @@ const Button = ({
             [`mailpoet-button-${dimension}`]: dimension,
             [`mailpoet-button-${variant}`]: variant,
             'mailpoet-button-with-spinner': withSpinner,
-            'mailpoet-disabled': isDisabled,
+            'mailpoet-button-disabled': isDisabled,
             'mailpoet-full-width': isFullWidth,
           }
         )