diff --git a/components/Footer.tsx b/components/Footer.tsx
index 6ae29f2d..66092f29 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -44,19 +44,19 @@ export default function Footer() {
           <div className="lg:col-span-2">
             <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('legal')}</h4>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
-              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="text-white/70 hover:text-white transition-colors">{t('legalNotice')}</Link></li>
-              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="text-white/70 hover:text-white transition-colors">{t('privacyPolicy')}</Link></li>
-              <li><Link href={`/${locale}/${t('termsSlug')}`} className="text-white/70 hover:text-white transition-colors">{t('terms')}</Link></li>
+              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('legalNotice')}</Link></li>
+              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('privacyPolicy')}</Link></li>
+              <li><Link href={`/${locale}/${t('termsSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('terms')}</Link></li>
             </ul>
           </div>
 
           <div className="lg:col-span-2">
             <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('company')}</h4>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
-              <li><Link href={`/${locale}/team`} className="text-white/70 hover:text-white transition-colors">{navT('team')}</Link></li>
-              <li><Link href={`/${locale}/products`} className="text-white/70 hover:text-white transition-colors">{navT('products')}</Link></li>
-              <li><Link href={`/${locale}/blog`} className="text-white/70 hover:text-white transition-colors">{navT('blog')}</Link></li>
-              <li><Link href={`/${locale}/contact`} className="text-white/70 hover:text-white transition-colors">{navT('contact')}</Link></li>
+              <li><Link href={`/${locale}/team`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('team')}</Link></li>
+              <li><Link href={`/${locale}/products`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('products')}</Link></li>
+              <li><Link href={`/${locale}/blog`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('blog')}</Link></li>
+              <li><Link href={`/${locale}/contact`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('contact')}</Link></li>
             </ul>
           </div>
 
diff --git a/components/Header.tsx b/components/Header.tsx
index e8dc30e0..a6faebb8 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -123,11 +123,11 @@ export default function Header() {
                     href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
                     className={cn(
                       textColorClass,
-                      "hover:text-accent font-bold transition-all text-base md:text-lg tracking-tight relative group inline-block"
+                      "hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5"
                     )}
                   >
                     {item.label}
-                    <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-300 group-hover:w-full rounded-full" />
+                    <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
                   </Link>
                 </motion.div>
               ))}
diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
index 16396524..d0ab1eed 100644
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -52,11 +52,11 @@ export default function Hero() {
             <motion.div variants={buttonVariants}>
               <Button href="/contact" variant="accent" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg">
                 {t('cta')}
-                <span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span>
+                <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
               </Button>
             </motion.div>
             <motion.div variants={buttonVariants}>
-              <Button href="/products" variant="ghost" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg text-white border-white/20 hover:bg-white/10 md:bg-white md:text-saturated md:hover:bg-neutral-light md:border-none">
+              <Button href="/products" variant="white" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none">
                 {t('exploreProducts')}
               </Button>
             </motion.div>
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 18b342a7..7fc06fcf 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -11,16 +11,16 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
-  const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95';
+  const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
   
   const variants = {
-    primary: 'bg-primary text-white hover:bg-primary-dark shadow-md hover:shadow-lg',
-    secondary: 'bg-secondary text-white hover:bg-secondary-light shadow-md hover:shadow-lg',
-    accent: 'bg-accent text-primary-dark hover:bg-accent-dark shadow-md hover:shadow-lg',
-    saturated: 'bg-saturated text-white hover:bg-primary shadow-md hover:shadow-lg',
-    outline: 'border-2 border-primary bg-transparent hover:bg-primary hover:text-white text-primary',
-    ghost: 'hover:bg-primary-light text-primary',
-    white: 'bg-white text-primary hover:bg-neutral-light shadow-md hover:shadow-lg',
+    primary: 'bg-primary text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
+    secondary: 'bg-secondary text-white shadow-md hover:shadow-secondary/30 hover:shadow-2xl',
+    accent: 'bg-accent text-primary-dark shadow-md hover:shadow-accent/30 hover:shadow-2xl',
+    saturated: 'bg-saturated text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
+    outline: 'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
+    ghost: 'text-primary hover:shadow-lg',
+    white: 'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
   };
 
   const sizes = {
@@ -32,15 +32,42 @@ export function Button({ className, variant = 'primary', size = 'md', href, ...p
 
   const styles = cn(baseStyles, variants[variant], sizes[size], className);
 
+  const overlayColors = {
+    primary: 'bg-primary-dark',
+    secondary: 'bg-secondary-light',
+    accent: 'bg-accent-dark',
+    saturated: 'bg-primary',
+    outline: 'bg-primary',
+    ghost: 'bg-primary-light/10',
+    white: 'bg-primary-light',
+  };
+
+  const content = (
+    <>
+      <span className={cn(
+        "relative z-10 flex items-center justify-center gap-2 transition-colors duration-500",
+        variant === 'white' ? "group-hover/btn:text-primary-dark" : ""
+      )}>
+        {props.children}
+      </span>
+      <span className={cn(
+        "absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out",
+        overlayColors[variant]
+      )} />
+    </>
+  );
+
   if (href) {
     return (
       <Link href={href} className={styles}>
-        {props.children}
+        {content}
       </Link>
     );
   }
 
   return (
-    <button className={styles} {...props} />
+    <button className={styles} {...props}>
+      {content}
+    </button>
   );
 }