diff --git a/src/components/sections/hero/HeroAnimated.tsx b/src/components/sections/hero/HeroAnimated.tsx
index ce162a1..172378c 100644
--- a/src/components/sections/hero/HeroAnimated.tsx
+++ b/src/components/sections/hero/HeroAnimated.tsx
@@ -54,8 +54,8 @@ const HeroAnimated = ({
             className="max-w-8/10 text-lg md:text-xl leading-tight text-center"
           />
           <div className="flex flex-wrap justify-center gap-3 mt-2">
-            <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />
-            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate className="btn-3d" />
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} className="btn-3d" />
           </div>
         </div>
       </div>
diff --git a/src/index.css b/src/index.css
index 55745eb..af63c5c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -194,3 +194,13 @@ h6 {
     2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
   border: 1px solid var(--color-secondary-cta);
 }
+
+.btn-3d {
+  transition: transform 0.1s ease-out, border-bottom-width 0.1s ease-out;
+  border-bottom: 4px solid rgba(0, 0, 0, 0.25);
+}
+
+.btn-3d:active {
+  transform: translateY(2px);
+  border-bottom-width: 2px;
+}