diff --git a/src/components/Button.astro b/src/components/Button.astro
new file mode 100644
index 0000000..9741cd8
--- /dev/null
+++ b/src/components/Button.astro
@@ -0,0 +1,43 @@
+---
+interface Props {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  href?: string;
+  class?: string;
+  [x: string]: any;
+}
+
+const { 
+  variant = 'primary', 
+  size = 'md', 
+  href,
+  class: className,
+  ...rest 
+} = Astro.props;
+
+const variants = {
+  primary: 'bg-orange-500 text-white hover:bg-orange-600',
+  secondary: 'bg-amber-400 text-stone-900 hover:bg-amber-500',
+  outline: 'outline outline-2 outline-offset-[-2px] outline-orange-500 text-orange-500 hover:bg-orange-50',
+  ghost: 'text-stone-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800'
+};
+
+// Map sizes based on exact Figma sizes
+const sizes = {
+  sm: 'h-8 px-3 py-1.5 text-sm leading-5',
+  md: 'h-10 px-4 py-2 text-base leading-6', // Uses h-10 based on size specs, though some variants export h-11
+  lg: 'h-12 px-6 py-3 text-lg leading-7'
+};
+
+const baseClasses = 'inline-flex items-center justify-center font-[\'Outfit\'] font-medium rounded-lg text-center transition-colors duration-200 cursor-pointer';
+
+const Element = href ? 'a' : 'button';
+---
+
+<Element 
+  href={href} 
+  class:list={[baseClasses, variants[variant], sizes[size], className]}
+  {...rest}
+>
+  <slot />
+</Element>
diff --git a/src/pages/[lang]/sponsors.astro b/src/pages/[lang]/sponsors.astro
index aec0a8c..e660ad1 100644
--- a/src/pages/[lang]/sponsors.astro
+++ b/src/pages/[lang]/sponsors.astro
@@ -2,6 +2,7 @@
 import Layout from '../../layouts/Layout.astro'
 import { SPONSORS_EMAIL } from '../constants'
 import { texts } from '../../i18n/sponsors'
+import Button from '../../components/Button.astro'
 
 export function getStaticPaths() {
   return [{ params: { lang: 'es' } }, { params: { lang: 'en' } }, { params: { lang: 'ca' } }]
@@ -510,12 +511,14 @@ const {
             {contact.body}
           </p>
           <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <a
+            <Button
               href={`mailto:${SPONSORS_EMAIL}?subject=${encodeURIComponent('Interés de patrocinio para PyConES 2026')}`}
-              class="bg-pycon-orange text-pycon-black font-bold px-8 py-4 no-underline rounded text-lg uppercase inline-block hover:bg-pycon-orange-75 transition-colors"
+              variant="primary"
+              size="lg"
+              class="uppercase"
             >
               {contact.email}
-            </a>
+            </Button>
           </div>
           <p class="mt-6 text-white">{SPONSORS_EMAIL}</p>
         </div>