diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 03c9711c2d..b1f9bd547e 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -273,7 +273,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
                 name={StartIcon}
                 className={classNames(
                   loading ? "invisible" : "visible",
-                  "button-icon group-active:translate-y-[0.5px]",
+                  "button-icon group-[:not(div):active]:translate-y-[0.5px]",
                   variant === "icon" && "h-4 w-4",
                   variant === "button" && "h-4 w-4 stroke-[1.5px] "
                 )}
@@ -286,7 +286,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           "contents", // This makes the div behave like it doesn't exist in the layout
           loading ? "invisible" : "visible",
           variant === "fab" ? "hidden md:contents" : "",
-          "group-active:translate-y-[0.5px]"
+          "group-[:not(div):active]:translate-y-[0.5px]"
         )}>
         {props.children}
       </div>
@@ -321,7 +321,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
               name={EndIcon}
               className={classNames(
                 loading ? "invisible" : "visible",
-                "group-active:translate-y-[0.5px]",
+                "group-[:not(div):active]:translate-y-[0.5px]",
                 variant === "icon" && "h-4 w-4",
                 variant === "button" && "h-4 w-4 stroke-[1.5px] "
               )}