diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index 1d11aaec6ff..4773773559a 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -373,33 +373,6 @@ button {
   }
 }
 
-@include disabled();
-
-@keyframes loader-in {
-  0% {
-    inline-size: 0;
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  100% {
-    inline-size: 1em;
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes loader-out {
-  0% {
-    inline-size: 1em;
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    inline-size: 0;
-    opacity: 0;
-    transform: scale(0.5);
-  }
-}
-
 .calcite-button--loader {
   @apply flex;
   calcite-loader {
@@ -581,3 +554,29 @@ button {
 }
 
 @include base-component();
+@include disabled();
+
+@keyframes loader-in {
+  0% {
+    inline-size: 0;
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    inline-size: 1em;
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes loader-out {
+  0% {
+    inline-size: 1em;
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    inline-size: 0;
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}