fix: button

src/components/ButtonContact.astro

@@ -7,10 +7,29 @@ const { style } = Astro.props;
 ---
 
 <a
-  class={style}
+  class=`relative before:content-[''] before:absolute
+    before:-left-[0.125rem] before:-right-[0.125rem] 
+    before:top-1 before:-bottom-[0.125rem] before:-z-10
+    before:bg-clip-padding before:opacity-60 before:blur-md
+    before:transition-all before:duration-150 before:filter
+    ${style}`
   href="mailto:[email protected]"
   target="_blank"
   rel="noopener noreferrer"
 >
   ¡A trabajar!
 </a>
+
+<style>
+  a::before {
+    background-image: linear-gradient(
+      120deg,
+      #ec6192,
+      #ec4c34,
+      #ffbd2b,
+      #ebde56,
+      #57c754,
+      #53a1eb
+    );
+  }
+</style>

src/components/header/Header.astro

@@ -27,7 +27,7 @@ import MenuToggle from "./MenuToggle.astro";
       <DarkModeToogle />
       <MenuToggle />
       <ButtonContact
-        style="border-2 border-[#96F]/90 bg-zinc-100 text-zinc-950 rounded-md bg-opacity-90 hover:bg-opacity-100 transition-opacity duration-20 py-1.5 px-3 text-sm shadow-[0px_0px_15px_2px] shadow-purple-500/50 hidden md:block"
+        style="border-2 border-[#96F]/90 bg-zinc-100 text-zinc-950 rounded-md bg-opacity-90 hover:bg-opacity-100 transition-opacity duration-20 py-1.5 px-3 text-sm hidden md:block"
       />
     </section>
   </div>

src/components/header/Menu.astro

@@ -50,7 +50,7 @@ import ButtonContact from "../ButtonContact.astro";
       </a>
     </li>
     <ButtonContact
-      style="w-28 mt-10 z-50 border-2 border-[#96F]/90 bg-zinc-100 text-zinc-950 rounded-md bg-opacity-90 hover:bg-opacity-100 transition-opacity duration-20 py-1.5 px-3 text-sm shadow-[0px_0px_15px_2px] shadow-purple-500/50 block md:hidden"
+      style="w-28 mt-10 z-50 border-2 border-[#96F]/90 bg-zinc-100 text-zinc-950 rounded-md bg-opacity-90 hover:bg-opacity-100 transition-opacity duration-20 py-1.5 px-3 text-sm block md:hidden"
     />
   </ul>
 </nav>

src/components/main/home/Home.astro

@@ -21,8 +21,11 @@ import CardHome from "./CardHome.astro";
       <h1
         class="lg:text-6xl font-black text-zinc-950 dark:text-zinc-100 md:text-5xl text-4xl"
       >
-        Hola, soy<span class="font-black"> Humberto Yupanqui Apaza</span>,
-        desarrollador Fullstack
+        Hola, soy<span
+          class="font-black bg-gradient-to-r from-sky-600 to-purple-900 bg-clip-text text-transparent"
+        >
+          Humberto Yupanqui Apaza</span
+        >, desarrollador Fullstack
       </h1>
       <p
         class="dark:text-[#F5F9FF] text-[#0A0C10] text-base font-normal opacity-70 flex flex-col gap-3"
@@ -53,7 +56,7 @@ import CardHome from "./CardHome.astro";
         <IconDownload />
       </a>
       <ButtonContact
-        style="border-2 border-[#96F]/20 bg-zinc-800 text-zinc-100 rounded-md bg-opacity-90 hover:bg-opacity-100 transition-opacity duration-20 py-2 px-4 text-sm shadow-[0px_0px_15px_2px] shadow-purple-500/50"
+        style="border-2 border-[#96F]/20 bg-zinc-800 text-zinc-100 rounded-md bg-opacity-90 hover:bg-opacity-100 transition-opacity duration-20 py-2 px-4 text-sm"
       />
     </section>
   </div>
@@ -68,13 +71,6 @@ import CardHome from "./CardHome.astro";
 </section>
 
 <style>
-  h1 > span {
-    background-image: linear-gradient(45deg, #954dd8, #6300c0);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-family: 900;
-  }
-
   h1 {
     text-wrap: balance;
   }