diff --git a/components/button/sandbox.js b/components/button/sandbox.js
index 2e6d673b3..a693d05b4 100644
--- a/components/button/sandbox.js
+++ b/components/button/sandbox.js
@@ -18,6 +18,7 @@ export class ButtonSandbox extends SandboxComponent {
       { icon, iconOnly: false },
       { icon, iconOnly: true },
     ];
+    const disabled = [false, true];
 
     return html`
       <style>
@@ -43,29 +44,39 @@ export class ButtonSandbox extends SandboxComponent {
         Button in <mdn-button .icon=${icon}>the middle</mdn-button> of text with
         icon.
       </p>
-      ${hrefs.map(
-        (href) => html`
-          <h3><code>${href ? "<a>" : "<button>"}</code></h3>
-          <section>
-            ${variants.map((variant) =>
-              actions.map((action) =>
-                icons.map(
-                  ({ icon, iconOnly }) => html`
-                    <mdn-button
-                      href=${ifDefined(href)}
-                      variant=${ifDefined(variant)}
-                      action=${ifDefined(action)}
-                      .icon=${icon}
-                      ?icon-only=${iconOnly}
-                    >
-                      ${variant || "no variant"} ${action} ${icon ? "icon" : ""}
-                    </mdn-button>
-                  `,
+      ${hrefs.map((href) =>
+        disabled.map(
+          (disabled) => html`
+            <h3>
+              <code
+                >${href
+                  ? "<a>"
+                  : `<button${disabled ? " disabled" : ""}>`}</code
+              >
+            </h3>
+            <section>
+              ${variants.map((variant) =>
+                actions.map((action) =>
+                  icons.map(
+                    ({ icon, iconOnly }) => html`
+                      <mdn-button
+                        href=${ifDefined(href)}
+                        variant=${ifDefined(variant)}
+                        action=${ifDefined(action)}
+                        .icon=${icon}
+                        ?icon-only=${iconOnly}
+                        ?disabled=${disabled}
+                      >
+                        ${variant || "no variant"} ${action}
+                        ${icon ? "icon" : ""} ${disabled ? "disabled" : ""}
+                      </mdn-button>
+                    `,
+                  ),
                 ),
-              ),
-            )}
-          </section>
-        `,
+              )}
+            </section>
+          `,
+        ),
       )}
       <h2>Server component</h2>
       <div class="manual-size">
diff --git a/components/button/server.css b/components/button/server.css
index eb4c3f3fc..4f1ea16f1 100644
--- a/components/button/server.css
+++ b/components/button/server.css
@@ -34,7 +34,7 @@
     background-color: light-dark(var(--color-black), var(--color-white));
 
     &:hover {
-      background-color: light-dark(var(--color-gray-20), var(--color-gray-80));
+      background-color: light-dark(var(--color-gray-40), var(--color-gray-60));
     }
 
     &[data-action="positive"] {
@@ -68,13 +68,14 @@
     border-color: currentcolor;
 
     &:hover {
-      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));
+      background-color: light-dark(var(--color-gray-80), var(--color-gray-40));
     }
 
     &[data-action="positive"] {
       color: light-dark(var(--color-green-50), var(--color-green-80));
 
       &:hover {
+        color: light-dark(var(--color-green-20), var(--color-green-80));
         background-color: light-dark(
           var(--color-green-90),
           var(--color-green-10)
@@ -86,6 +87,7 @@
       color: light-dark(var(--color-red-50), var(--color-red-80));
 
       &:hover {
+        color: light-dark(var(--color-red-20), var(--color-red-80));
         background-color: light-dark(var(--color-red-90), var(--color-red-10));
       }
     }
@@ -95,13 +97,14 @@
 
   &[data-variant="plain"] {
     &:hover {
-      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));
+      background-color: light-dark(var(--color-gray-80), var(--color-gray-40));
     }
 
     &[data-action="positive"] {
       color: light-dark(var(--color-green-50), var(--color-green-80));
 
       &:hover {
+        color: light-dark(var(--color-green-20), var(--color-green-80));
         background-color: light-dark(
           var(--color-green-90),
           var(--color-green-10)
@@ -113,6 +116,7 @@
       color: light-dark(var(--color-red-50), var(--color-red-80));
 
       &:hover {
+        color: light-dark(var(--color-red-20), var(--color-red-80));
         background-color: light-dark(var(--color-red-90), var(--color-red-10));
       }
     }