diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
index 42741257e0f5..020f645206cc 100644
--- a/packages/components/src/components/button/_mixins.scss
+++ b/packages/components/src/components/button/_mixins.scss
@@ -26,8 +26,7 @@
   text-align: left;
   text-decoration: none;
   transition: all $duration--fast-01 motion(entrance, productive);
-  outline: $button-outline-width solid transparent;
-  outline-offset: -4px;
+  outline: none;
   position: relative;
   max-width: rem(320px);
 
@@ -72,7 +71,7 @@
 
   &:focus {
     border-color: $focus;
-    outline-color: $ui-02;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   &:disabled:hover,
@@ -83,7 +82,7 @@
     background-color: $disabled-02;
     border-color: $disabled-02;
     text-decoration: none;
-    outline-color: $disabled-02;
+    box-shadow: none;
   }
 
   &:active {