diff --git a/workspaces/core/src/button/Button.tsx b/workspaces/core/src/button/Button.tsx
index 0a089c43ee..a3b50fd483 100644
--- a/workspaces/core/src/button/Button.tsx
+++ b/workspaces/core/src/button/Button.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import type ButtonProps from './private/types/ButtonProps';
 import AnimationContent from './private/utils/buttonAnimations/AnimationContent';
 import ButtonComponent from './styles/ButtonComponent';
@@ -29,6 +29,9 @@ const Button = <C extends React.ElementType = 'button'>({
   const [isHover, setIsHover] = useState(false);
   const hasAnimationContent =
     animation === 'progress' || animation === 'success';
+  const onMouseEnter = useCallback(() => setIsHover(true), [setIsHover]);
+  const onMouseLeave = useCallback(() => setIsHover(false), [setIsHover]);
+
   return (
     <ButtonComponent
       size={size}
@@ -41,8 +44,8 @@ const Button = <C extends React.ElementType = 'button'>({
       disabled={disabled}
       animation={animation}
       as={as}
-      onMouseEnter={() => setIsHover(true)}
-      onMouseLeave={() => setIsHover(false)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       customClassName={className}
       {...rest}
     >
diff --git a/workspaces/core/src/button/styles/Hover.tsx b/workspaces/core/src/button/styles/Hover.tsx
index ef27417896..70a2acaee2 100644
--- a/workspaces/core/src/button/styles/Hover.tsx
+++ b/workspaces/core/src/button/styles/Hover.tsx
@@ -16,7 +16,7 @@ const Hover = ({
       className={mergeClassnames(
         'z-[-1] block absolute inset-0 pointer-events-none',
         'transition-[background-color_0.2s_ease-in-out]',
-        isHover && hoverBackground
+        isHover ? hoverBackground : '',
       )}
     />
   );