fix: improve buttons animations

Author: SebastianL-dev

src/components/Button.astro

@@ -1,5 +1,4 @@
 ---
-import { motion } from 'motion/react'
 import { getTitleAnimation } from '../animations'
 
 const {
@@ -15,15 +14,15 @@ const {
 
 {
   href ? (
-    <motion.a
-      className="transition-bg h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
+    <a
+      className="transition-all h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
       client:load
       {...getTitleAnimation(0.2)}
       id={id}
       {...extra}
       href={href}
       class:list={[
-        'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
+        'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-all duration-200',
         className,
         isPrimary
           ? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark'
@@ -35,19 +34,19 @@ const {
       ]}
     >
       <slot />
-    </motion.a>
+    </a>
   ) : (
-    <motion.button
-      className="transition-bg h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
+    <button
+      className="transition-all h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
       client:load
       {...getTitleAnimation(0.2)}
       id={id}
       {...extra}
       class:list={[
-        'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
+        'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-all duration-200',
         className,
         isPrimary
-          ? 'bg-dark text-paper'
+          ? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark'
           : isAlert
             ? 'bg-red-300 text-dark'
             : !isBordered
@@ -56,7 +55,7 @@ const {
       ]}
     >
       <slot />
-    </motion.button>
+    </button>
   )
 }
 <style>

src/components/Hero.astro

@@ -27,7 +27,7 @@ function getHeroTitleAnimation() {
   <div class="flex h-full flex-col items-center justify-center">
     <motion.a
       href="/download"
-      className="transition-bg mb-10 flex items-center gap-2 rounded-full border-2 border-dark bg-dark px-2 py-1 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
+      className="mb-10 flex items-center gap-2 rounded-full border-2 border-dark bg-dark px-2 py-1 text-sm text-paper shadow-sm transition-all duration-200 ease-in-out hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
       client:load
       {...getTitleAnimation(1.8)}
     >