diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 793b2d8..e5962de 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -61,8 +61,8 @@ const InlinedHeroBrand = ({
 
             <div className="w-full md:w-1/2 flex justify-start md:justify-end">
               <div className="flex flex-wrap gap-3">
-                <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
-                <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+                <Button text={primaryButton.text} href={primaryButton.href} variant="primary" className="[perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateX(20deg)_rotateY(20deg)_translateZ(50px)]"/>
+                <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} className="[perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateX(20deg)_rotateY(20deg)_translateZ(50px)]" />
               </div>
             </div>
           </div>