diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
index 04a4abf7cef..4ee5d10ee25 100644
--- a/packages/calcite-components/src/components/button/button.e2e.ts
+++ b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -1,5 +1,5 @@
 import { E2EElement, newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden, t9n } from "../../tests/commonTests";
+import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden, t9n, themed } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -758,4 +758,95 @@ describe("calcite-button", () => {
     expect(elementHost).toEqualAttribute("width", "full");
     expect(await elementAsButton.getComputedStyle()["width"]).toEqual(await elementHost.getComputedStyle()["width"]);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-button", {
+        "--calcite-button-background-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-button-border-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-button-corner-radius": [
+          {
+            targetProp: "borderRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderRadius",
+          },
+        ],
+        "--calcite-button-shadow": {
+          targetProp: "boxShadow",
+        },
+        "--calcite-button-text-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("fine-grained round corners", () => {
+      themed("calcite-button", {
+        "--calcite-button-corner-radius-start-start": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderStartStartRadius",
+        },
+        "--calcite-button-corner-radius-start-end": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderStartEndRadius",
+        },
+        "--calcite-button-corner-radius-end-start": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderEndStartRadius",
+        },
+        "--calcite-button-corner-radius-end-end": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderEndEndRadius",
+        },
+      });
+    });
+
+    describe("link", () => {
+      themed(html`<calcite-button href="https://www.esri.com">button</calcite-button>`, {
+        "--calcite-button-background-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-button-border-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-button-corner-radius": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderRadius",
+        },
+        "--calcite-button-text-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("with icons", () => {
+      themed(html`<calcite-button icon-start="banana">button</calcite-button>`, {
+        "--calcite-button-icon-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("loading", () => {
+      themed(html`<calcite-button loading>button</calcite-button>`, {
+        "--calcite-button-loader-color": {
+          shadowSelector: `calcite-loader`,
+          targetProp: "--calcite-loader-color-start",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index 13a3c91439d..6bdbf40aa57 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -10,10 +10,10 @@
  * @prop --calcite-button-corner-radius-start-end: defines the component's top-right corner radius. Will fallback to --calcite-button-corner-radius.
  * @prop --calcite-button-corner-radius-end-start: defines the component's bottom-left corner radius. Will fallback to --calcite-button-corner-radius.
  * @prop --calcite-button-corner-radius-end-end: defines the component's bottom-right corner radius. Will fallback to --calcite-button-corner-radius.
+ * @prop --calcite-button-icon-color: defines the color of an icon in the component.
  * @prop --calcite-button-loader-color: defines the component's loader color.
  * @prop --calcite-button-shadow: defines the component's shadow.
  * @prop --calcite-button-text-color: defines the component's text color.
- * @prop --calcite-button-icon-color: defines the color of an icon in the component.
  */
 
 :host {
@@ -23,87 +23,91 @@
     --calcite-button-corner-radius,
     var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))
   );
+  box-shadow: var(--calcite-button-shadow, var(--calcite-shadow-none));
+}
+
+.button {
+  @apply focus-base
+  font-inherit
+  relative
+  box-border
+  flex
+  cursor-pointer
+  select-none
+  appearance-none
+  items-center
+  border-none
+  text-center
+  font-normal
+  no-underline;
+  padding-block: var(--calcite-internal-button-space-y, 3px);
+  padding-inline: var(--calcite-internal-button-space-x, 7px);
+  inline-size: var(--calcite-container-size-content-fluid);
+  block-size: var(--calcite-container-size-content-fluid);
+  border-start-start-radius: var(
+    --calcite-button-corner-radius-start-start,
+    var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
+  );
+  border-start-end-radius: var(
+    --calcite-button-corner-radius-start-end,
+    var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
+  );
+  border-end-start-radius: var(
+    --calcite-button-corner-radius-end-start,
+    var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
+  );
+  border-end-end-radius: var(
+    --calcite-button-corner-radius-end-end,
+    var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
+  );
+  justify-content: var(--calcite-internal-button-content-align-x, center);
+  background-color: var(
+    --calcite-button-background-color,
+    var(--calcite-internal-button-background-color, var(--calcite-color-foreground-1))
+  );
+  color: var(--calcite-button-text-color, var(--calcite-internal-button-text-color, var(--calcite-color-text-1)));
+  box-shadow: inset 0 0 0 var(--calcite-internal-button-border-width)
+    var(--calcite-button-border-color, var(--calcite-internal-button-border-color));
+  border-style: none;
+  border-width: var(--calcite-border-width-sm);
+  border-color: var(
+    --calcite-button-border-color,
+    var(--calcite-internal-button-border-color, var(--calcite-color-transparent))
+  );
+  transition:
+    color var(--calcite-animation-timing) ease-in-out,
+    background-color var(--calcite-animation-timing) ease-in-out,
+    box-shadow var(--calcite-animation-timing) ease-in-out,
+    outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
 
-  button,
-  a {
-    @apply focus-base
-      font-inherit
-      relative
-      box-border
-      flex
-      cursor-pointer
-      select-none
-      appearance-none
-      items-center
-      border-none
-      text-center
-      font-normal
-      no-underline;
-    padding-block: var(--calcite-internal-button-space-y, 3px);
-    padding-inline: var(--calcite-internal-button-space-x, 7px);
-    inline-size: var(--calcite-container-size-content-fluid);
-    block-size: var(--calcite-container-size-content-fluid);
-    border-start-start-radius: var(
-      --calcite-button-corner-radius-start-start,
-      var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
-    );
-    border-start-end-radius: var(
-      --calcite-button-corner-radius-start-end,
-      var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
-    );
-    border-end-start-radius: var(
-      --calcite-button-corner-radius-end-start,
-      var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
-    );
-    border-end-end-radius: var(
-      --calcite-button-corner-radius-end-end,
-      var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
-    );
-    justify-content: var(--calcite-internal-button-content-align-x, center);
-    background-color: var(
-      --calcite-button-background-color,
-      var(--calcite-internal-button-background-color, var(--calcite-color-foreground-1))
-    );
-    color: var(--calcite-button-text-color, var(--calcite-internal-button-text-color, var(--calcite-color-text-1)));
-    box-shadow: var(--calcite-button-shadow-color, var(--calcite-internal-button-shadow, none));
-    border-style: none;
-    border-width: var(--calcite-border-width-sm);
-    border-color: var(
-      --calcite-button-border-color,
-      var(--calcite-internal-button-border-color, var(--calcite-color-transparent))
-    );
-
-    // include transition from focus
-    transition:
-      color var(--calcite-animation-timing) ease-in-out,
-      background-color var(--calcite-animation-timing) ease-in-out,
-      box-shadow var(--calcite-animation-timing) ease-in-out,
-      outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
+  span {
+    @apply truncate;
+  }
 
-    span {
-      @apply truncate;
-    }
+  &:hover {
+    --calcite-internal-button-border-width: var(--calcite-border-width-sm);
   }
 
-  calcite-loader {
-    --calcite-loader-color-start: var(
-      --calcite-button-loader-color,
-      var(--calcite-internal-button-loader-color, var(--calcite-color-text-inverse))
-    );
+  &:active,
+  &:focus {
+    --calcite-internal-button-border-width: var(--calcite-border-width-md);
   }
 }
 
-:host(:focus) button,
-:host(:focus) a,
-button:focus,
-a:focus {
+calcite-loader {
+  --calcite-loader-color-start: var(
+    --calcite-button-loader-color,
+    var(--calcite-internal-button-loader-color, var(--calcite-color-text-inverse))
+  );
+}
+
+:host(:focus) .button,
+.button:focus {
   @apply focus-outset;
 }
 
-:host(:hover) button,
-:host(:hover) a,
-button:hover,
-a:hover {
+:host(:hover) .button,
+.button:hover {
   @apply no-underline;
 }
 
@@ -155,8 +159,7 @@ a:hover {
 // Scales
 // generate button scales (scenario: text exists)
 :host([scale="s"]) {
-  a,
-  button {
+  .button {
     --calcite-internal-button-space-y: 3px;
 
     &.content--slotted {
@@ -172,8 +175,7 @@ a:hover {
   }
 }
 :host([scale="s"][appearance="transparent"]) {
-  a,
-  button {
+  .button {
     &.content--slotted {
       --calcite-internal-button-space-x: theme("padding.2");
     }
@@ -181,8 +183,7 @@ a:hover {
 }
 // generate fab scales (scenario: 2 icons, ie., should not be square)
 :host([scale="s"][icon-start][icon-end]) {
-  a,
-  button {
+  .button {
     &:not(.content--slotted) {
       --calcite-internal-button-space-x: 23px;
       @apply text-0h h-6;
@@ -191,8 +192,7 @@ a:hover {
 }
 // accommodate for transparent buttons not having borders
 :host([scale="s"][icon-start][icon-end][appearance="transparent"]) {
-  a,
-  button {
+  .button {
     &:not(.content--slotted) {
       --calcite-internal-button-space-x: theme("padding.6");
     }
@@ -200,8 +200,7 @@ a:hover {
 }
 
 :host([scale="m"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-space-y: 7px;
     --calcite-internal-button-content-space: theme("margin.3");
 
@@ -219,16 +218,14 @@ a:hover {
 }
 // accommodate for transparent buttons not having borders
 :host([scale="m"][appearance="transparent"]) {
-  a,
-  button {
+  .button {
     &.content--slotted {
       --calcite-internal-button-space-x: theme("padding.3");
     }
   }
 }
 :host([scale="m"][icon-start][icon-end]) {
-  a,
-  button {
+  .button {
     &:not(.content--slotted) {
       --calcite-internal-button-space-x: theme("padding.8");
       @apply text-0h h-8;
@@ -237,8 +234,7 @@ a:hover {
 }
 // accommodate for transparent buttons not having borders
 :host([scale="m"][icon-start][icon-end][appearance="transparent"]) {
-  a,
-  button {
+  .button {
     &:not(.content--slotted) {
       --calcite-internal-button-space-x: 33px;
     }
@@ -246,8 +242,7 @@ a:hover {
 }
 
 :host([scale="l"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-content-space: theme("margin.4");
 
     &.content--slotted {
@@ -273,16 +268,14 @@ a:hover {
 }
 // accommodate for transparent buttons not having borders
 :host([scale="l"][appearance="transparent"]) {
-  a,
-  button {
+  .button {
     &:not(.content--slotted) {
       --calcite-internal-button-space-y: theme("padding[2.5]");
     }
   }
 }
 :host([scale="l"][icon-start][icon-end]) {
-  a,
-  button {
+  .button {
     &:not(.content--slotted) {
       --calcite-internal-button-space-x: 43px;
       @apply text-0h h-11;
@@ -295,8 +288,7 @@ a:hover {
 }
 // accommodate for transparent buttons not having borders
 :host([scale="l"][icon-start][icon-end][appearance="transparent"]) {
-  a,
-  button {
+  .button {
     &:not(.content--slotted) {
       --calcite-internal-button-space-x: theme("padding.11");
     }
@@ -316,26 +308,22 @@ a:hover {
 
 // alignment
 :host([alignment="center"]:not([width="auto"])) {
-  a,
-  button {
+  .button {
     --calcite-internal-button-content-align-x: center;
   }
 }
 :host([alignment="start"]:not([width="auto"])) {
-  a,
-  button {
+  .button {
     --calcite-internal-button-content-align-x: flex-start;
   }
 }
 :host([alignment="end"]:not([width="auto"])) {
-  a,
-  button {
+  .button {
     --calcite-internal-button-content-align-x: flex-end;
   }
 }
 :host([alignment*="space-between"]:not([width="auto"])) {
-  a,
-  button {
+  .button {
     --calcite-internal-button-content-align-x: space-between;
   }
 }
@@ -343,8 +331,7 @@ a:hover {
   .icon--start {
     margin-inline-end: auto;
   }
-  a,
-  button {
+  .button {
     text-align: unset;
   }
 }
@@ -352,15 +339,13 @@ a:hover {
   .icon--end {
     margin-inline-start: auto;
   }
-  a,
-  button {
+  .button {
     text-align: unset;
   }
 }
 // only two icons
 :host([alignment="center"]) {
-  a:not(.content--slotted),
-  button:not(.content--slotted) {
+  .button:not(.content--slotted) {
     .icon--start + .icon--end {
       margin-inline-start: var(--calcite-internal-button-content-space, theme("margin.2"));
     }
@@ -369,15 +354,13 @@ a:hover {
 
 :host([loading]) {
   // center loading spinner when button has text
-  button.content--slotted,
-  a.content--slotted {
+  .button.content--slotted {
     .calcite-button--loader calcite-loader {
       margin-inline-end: var(--calcite-internal-button-content-space, theme("margin.2"));
     }
   }
   // hide icons when loading with no text
-  button:not(.content--slotted),
-  a:not(.content--slotted) {
+  .button:not(.content--slotted) {
     .icon--start,
     .icon--end {
       @apply hidden;
@@ -387,15 +370,13 @@ a:hover {
 
 // button styles
 :host([appearance]) {
-  button,
-  a {
+  .button {
     border-style: solid;
   }
 }
 
 :host([kind="brand"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
     --calcite-internal-button-background-color: var(--calcite-color-brand);
     --calcite-internal-button-loader-color: var(--calcite-color-text-inverse);
@@ -410,8 +391,7 @@ a:hover {
 }
 
 :host([kind="danger"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
     --calcite-internal-button-background-color: var(--calcite-color-status-danger);
     --calcite-internal-button-loader-color: var(--calcite-color-text-inverse);
@@ -426,8 +406,7 @@ a:hover {
   }
 }
 :host([kind="neutral"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
     --calcite-internal-button-background-color: var(--calcite-color-foreground-3);
 
@@ -445,8 +424,7 @@ a:hover {
   }
 }
 :host([kind="inverse"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
     --calcite-internal-button-background-color: var(--calcite-color-inverse);
 
@@ -465,139 +443,120 @@ a:hover {
 }
 // outline
 :host([appearance="outline-fill"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
-    --calcite-internal-button-shadow: inset 0 0 0 1px transparent;
-    border-width: var(--calcite-border-width-sm);
     border-style: solid;
   }
 }
 :host([appearance="outline-fill"][kind="brand"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-border-color: var(--calcite-color-brand);
     --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     --calcite-internal-button-text-color: var(--calcite-color-brand);
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
       --calcite-internal-button-text-color: var(--calcite-color-brand-hover);
-      --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
     }
     &:focus {
       --calcite-internal-button-border-color: var(--calcite-color-brand);
       --calcite-internal-button-text-color: var(--calcite-color-brand);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-brand);
     }
     &:active {
       --calcite-internal-button-border-color: var(--calcite-color-brand-press);
       --calcite-internal-button-text-color: var(--calcite-color-brand-press);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);
     }
     calcite-loader {
-      --calcite-internal-button-border-color: var(--calcite-color-brand);
+      --calcite-internal-button-loader-color: var(--calcite-color-brand);
     }
   }
 }
 :host([appearance="outline-fill"][kind="danger"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-border-color: var(--calcite-color-status-danger);
     --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     --calcite-internal-button-text-color: var(--calcite-color-status-danger);
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);
       --calcite-internal-button-text-color: var(--calcite-color-status-danger-hover);
-      --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
     }
     &:focus {
       --calcite-internal-button-border-color: var(--calcite-color-status-danger);
       --calcite-internal-button-text-color: var(--calcite-color-status-danger);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
     }
     &:active {
       --calcite-internal-button-border-color: var(--calcite-color-status-danger-press);
       --calcite-internal-button-text-color: var(--calcite-color-status-danger-press);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
     }
     calcite-loader {
-      --calcite-internal-button-border-color: var(--calcite-color-status-danger);
+      --calcite-internal-button-loader-color: var(--calcite-color-status-danger);
     }
   }
 }
 :host([appearance="outline-fill"][kind="neutral"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-border-color: var(--calcite-color-border-1);
     --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
     &:hover {
-      --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);
-    }
-    &:focus {
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
+      --calcite-internal-button-border-color: var(--calcite-color-border-3);
     }
+    &:focus,
     &:active {
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
+      --calcite-internal-button-border-color: var(--calcite-color-border-3);
     }
     calcite-loader {
-      --calcite-internal-button-border-color: var(--calcite-color-text-1);
+      --calcite-internal-button-loader-color: var(--calcite-color-text-1);
     }
   }
 }
 :host([appearance="outline-fill"][kind="inverse"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
     --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     --calcite-internal-button-border-color: var(--calcite-color-inverse);
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-inverse-hover);
-      --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);
     }
     &:focus {
       --calcite-internal-button-border-color: var(--calcite-color-inverse);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-inverse);
     }
     &:active {
       --calcite-internal-button-border-color: var(--calcite-color-inverse-press);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);
     }
     calcite-loader {
       --calcite-internal-button-loader-color: var(--calcite-color-text-1);
     }
   }
 }
+
 :host([appearance="outline"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-background-color: var(--calcite-color-transparent);
-    --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-transparent);
+
+    &:hover,
+    &:focus,
+    &:active {
+      --calcite-internal-button-background-color: var(--calcite-color-transparent);
+    }
   }
 }
+
 :host([appearance="outline"][kind="brand"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-brand);
     --calcite-internal-button-border-color: var(--calcite-color-brand);
 
     &:hover {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
       --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
       --calcite-internal-button-text-color: var(--calcite-color-brand-hover);
-      --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
     }
     &:focus {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
       --calcite-internal-button-border-color: var(--calcite-color-brand);
       --calcite-internal-button-text-color: var(--calcite-color-brand);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-brand);
     }
     &:active {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
       --calcite-internal-button-border-color: var(--calcite-color-brand-press);
       --calcite-internal-button-text-color: var(--calcite-color-brand-press);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);
     }
     calcite-loader {
       --calcite-internal-button-loader-color: var(--calcite-color-brand);
@@ -605,28 +564,21 @@ a:hover {
   }
 }
 :host([appearance="outline"][kind="danger"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-status-danger);
     --calcite-internal-button-border-color: var(--calcite-color-status-danger);
 
     &:hover {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
       --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);
       --calcite-internal-button-text-color: var(--calcite-color-status-danger-hover);
-      --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
     }
     &:focus {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
       --calcite-internal-button-border-color: var(--calcite-color-status-danger);
       --calcite-internal-button-text-color: var(--calcite-color-status-danger);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
     }
     &:active {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
       --calcite-internal-button-border-color: var(--calcite-color-status-danger-press);
       --calcite-internal-button-text-color: var(--calcite-color-status-danger-press);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
     }
     calcite-loader {
       --calcite-internal-button-loader-color: var(--calcite-color-status-danger);
@@ -634,23 +586,16 @@ a:hover {
   }
 }
 :host([appearance="outline"][kind="neutral"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-border-color: var(--calcite-color-border-1);
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
-    --calcite-internal-button-background-color: var(--calcite-color-transparent);
 
     &:hover {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
-      --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);
-    }
-    &:focus {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
+      --calcite-internal-button-background-color: var(--calcite-color-foreground-3);
     }
+    &:focus,
     &:active {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
+      --calcite-internal-button-border-color: var(--calcite-color-foreground-3);
     }
     calcite-loader {
       --calcite-internal-button-loader-color: var(--calcite-color-text-1);
@@ -658,28 +603,18 @@ a:hover {
   }
 }
 :host([appearance="outline"][kind="inverse"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
     --calcite-internal-button-border-color: var(--calcite-color-inverse);
 
-    &:hover,
-    &:focus,
-    &:active {
-      --calcite-internal-button-background-color: var(--calcite-color-transparent);
-    }
-
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-inverse-hover);
-      --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);
     }
     &:focus {
       --calcite-internal-button-border-color: var(--calcite-color-inverse);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-inverse);
     }
     &:active {
       --calcite-internal-button-border-color: var(--calcite-color-inverse-press);
-      --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);
     }
     calcite-loader {
       --calcite-internal-button-loader-color: var(--calcite-color-text-1);
@@ -687,22 +622,25 @@ a:hover {
   }
 }
 
-:host([appearance="outline-fill"][split-child="primary"]) button,
-:host([appearance="outline"][split-child="primary"]) button {
-  border-inline-end-width: 0;
-  border-inline-start-width: theme("borderWidth.DEFAULT");
+:host([appearance="outline-fill"][split-child="primary"]),
+:host([appearance="outline"][split-child="primary"]) {
+  .button {
+    border-inline-end-width: 0;
+    border-inline-start-width: theme("borderWidth.DEFAULT");
+  }
 }
 
-:host([appearance="outline-fill"][split-child="secondary"]) button,
-:host([appearance="outline"][split-child="secondary"]) button {
-  border-inline-start-width: 0;
-  border-inline-end-width: theme("borderWidth.DEFAULT");
+:host([appearance="outline-fill"][split-child="secondary"]),
+:host([appearance="outline"][split-child="secondary"]) {
+  .button {
+    border-inline-start-width: 0;
+    border-inline-end-width: theme("borderWidth.DEFAULT");
+  }
 }
 
 // transparent
 :host([appearance="transparent"]:not(.enable-editing-button)) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-background-color: var(--calcite-color-transparent);
     &:hover,
     &:focus {
@@ -714,8 +652,7 @@ a:hover {
   }
 }
 :host([appearance="transparent"][kind="brand"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-brand);
     &:hover {
       --calcite-internal-button-text-color: var(--calcite-color-brand-hover);
@@ -733,8 +670,7 @@ a:hover {
 }
 
 :host([appearance="transparent"][kind="danger"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-status-danger);
     &:hover {
       --calcite-internal-button-text-color: var(--calcite-color-status-danger-hover);
@@ -752,8 +688,7 @@ a:hover {
 }
 
 :host([appearance="transparent"][kind="neutral"]:not(.cancel-editing-button)) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
   }
   calcite-loader {
@@ -762,7 +697,7 @@ a:hover {
 }
 
 :host([appearance="transparent"][kind="neutral"].cancel-editing-button) {
-  button {
+  .button {
     border-block-color: var(--calcite-button-border-color, var(--calcite-color-border-input));
     border-block-style: solid;
     border-block-width: var(--calcite-border-width-sm);
@@ -779,14 +714,13 @@ a:hover {
 }
 
 :host([appearance="transparent"][kind="neutral"].enable-editing-button) {
-  button {
+  .button {
     --calcite-internal-button-background-color: var(--calcite-color-transparent);
   }
 }
 
 :host([appearance="transparent"][kind="inverse"]) {
-  button,
-  a {
+  .button {
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
   }
   calcite-loader {
@@ -797,7 +731,7 @@ a:hover {
 :host(.confirm-changes-button),
 :host(.cancel-editing-button),
 :host(.enable-editing-button) {
-  button {
+  .button {
     &:focus {
       outline-offset: -2px; // ensure focus outlines work in Safari
     }
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
index 5eb13e520d0..21f5936308e 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -287,6 +287,7 @@ export class Button
           aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
           aria-live="polite"
           class={{
+            [CSS.button]: true,
             [CSS.buttonPadding]: noStartEndIcons,
             [CSS.buttonPaddingShrunk]: !noStartEndIcons,
             [CSS.contentSlotted]: this.hasContent,
diff --git a/packages/calcite-components/src/components/button/resources.ts b/packages/calcite-components/src/components/button/resources.ts
index 6677324737a..140cc930e87 100644
--- a/packages/calcite-components/src/components/button/resources.ts
+++ b/packages/calcite-components/src/components/button/resources.ts
@@ -9,6 +9,7 @@ export const CSS = {
   loadingOut: "loading-out",
   iconStartEmpty: "icon-start-empty",
   iconEndEmpty: "icon-end-empty",
+  button: "button",
   buttonPadding: "button-padding",
   buttonPaddingShrunk: "button-padding--shrunk",
 };
diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts
index 08d897923ee..829aa288a2c 100755
--- a/packages/calcite-components/src/components/fab/fab.e2e.ts
+++ b/packages/calcite-components/src/components/fab/fab.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, hidden, renders, defaults } from "../../tests/commonTests";
+import { accessible, disabled, hidden, renders, defaults, themed } from "../../tests/commonTests";
 import { CSS } from "./resources";
 
 describe("calcite-fab", () => {
@@ -146,4 +146,39 @@ describe("calcite-fab", () => {
       });
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-fab", {
+        "--calcite-fab-background-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "--calcite-button-background-color",
+        },
+        "--calcite-fab-border-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "--calcite-button-border-color",
+        },
+        "--calcite-fab-corner-radius": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "--calcite-button-corner-radius",
+        },
+        "--calcite-fab-loader-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "--calcite-button-loader-color",
+        },
+        "--calcite-fab-shadow": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "--calcite-button-shadow",
+        },
+        "--calcite-fab-text-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "--calcite-button-text-color",
+        },
+        "--calcite-fab-icon-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "--calcite-button-icon-color",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss
index d9d75ddd0e5..4a2cc1b0863 100755
--- a/packages/calcite-components/src/components/fab/fab.scss
+++ b/packages/calcite-components/src/components/fab/fab.scss
@@ -45,7 +45,6 @@ calcite-button {
   --calcite-button-border-color: var(--calcite-fab-border-color);
   --calcite-button-corner-radius: var(--calcite-fab-corner-radius);
   --calcite-button-loader-color: var(--calcite-fab-loader-color);
-  --calcite-button-shadow: var(--calcite-fab-shadow);
   --calcite-button-text-color: var(--calcite-fab-text-color);
   --calcite-button-icon-color: var(--calcite-fab-icon-color);
   --calcite-button-shadow: var(