diff --git a/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts b/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts
index de4c934c424..0753bf04fe9 100644
--- a/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts
+++ b/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts
@@ -30,6 +30,7 @@ export const FlipperStyles = css`
         color: var(--neutral-foreground-rest);
         background: transparent;
         border: none;
+        outline: none;
         padding: 0;
     }
 
diff --git a/packages/web-components/fast-components/src/flipper/flipper.styles.ts b/packages/web-components/fast-components/src/flipper/flipper.styles.ts
index fe8f081cd5c..f5d30c94945 100644
--- a/packages/web-components/fast-components/src/flipper/flipper.styles.ts
+++ b/packages/web-components/fast-components/src/flipper/flipper.styles.ts
@@ -30,6 +30,7 @@ export const FlipperStyles = css`
         fill: var(--accent-foreground-cut-rest);
         color: var(--accent-foreground-cut-rest);
         background: transparent;
+        outline: none;
         border: none;
         padding: 0;
     }
@@ -64,17 +65,19 @@ export const FlipperStyles = css`
         color: var(--neutral-foreground-rest);
     }
 
-    :host(.disabled)::before {
+    :host(.disabled)::before,
+    :host(.disabled:hover)::before,
+    :host(.disabled:active)::before {
         background: var(--neutral-fill-stealth-rest);
         border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
     }
 
-    :host(:hover:enabled)::before {
+    :host(:hover)::before {
         background: var(--accent-fill-hover);
         border-color: var(--accent-fill-hover);
     }
 
-    :host(:active:enabled)::before {
+    :host(:active)::before {
         background: var(--accent-fill-active);
         border-color: var(--accent-fill-active);
     }