diff --git a/src/form/button.js b/src/form/button.js
index bc57e16..ebd14d2 100644
--- a/src/form/button.js
+++ b/src/form/button.js
@@ -56,7 +56,7 @@ class Button extends Component {
           border: 1px solid transparent;
           border-radius: inherit;
           white-space: nowrap;
-          background: #fff;
+          background: var(--wc-button-background, #fff);
           font-size: inherit;
           font-family: inherit;
           outline: none;
@@ -168,18 +168,33 @@ class Button extends Component {
       @loop $t, $c in $colors {
         :host([type='#{$t}']) {
           button {
-            color: var(--color-#{$c}-2);
-            border-color: var(--color-#{$c}-1);
+            color: var(--wc-button-color, var(--color-#{$c}-2));
+            border-color: var(--wc-button-border-color, var(--color-#{$c}-1));
 
             &:hover {
-              color: var(--color-#{$c}-1);
-              border-color: var(--color-#{$c}-2);
+              color: var(--wc-button-color-hover, var(--color-#{$c}-1));
+              border-color: var(
+                --wc-button-border-color-hover,
+                var(--color-#{$c}-2)
+              );
+              background: var(
+                --wc-button-background-hover,
+                var(--wc-button-background, #fff)
+              );
             }
             &:active {
-              color: var(--color-#{$c}-3);
+              color: var(--wc-button-color-active, var(--color-#{$c}-3));
+              background: var(
+                --wc-button-background-active,
+                var(--wc-button-background, #fff)
+              );
             }
             &:disabled {
-              color: var(--color-#{$c}-2);
+              color: var(--wc-button-color-disabled, var(--color-#{$c}-2));
+              background: var(
+                --wc-button-background-disabled,
+                var(--wc-button-background, #fff)
+              );
             }
           }