diff --git a/package-lock.json b/package-lock.json
index 5606a3bec5..8641176752 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "astro": "^5.1.2",
         "astro-icon": "^1.1.5",
         "astro-seo": "^0.8.4",
+        "class-variance-authority": "^0.7.1",
         "htmx.org": "^2.0.4",
         "markdown-it": "^14.0.0",
         "node-html-parser": "^7.0.1",
@@ -2876,6 +2877,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
     "node_modules/citty": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
diff --git a/package.json b/package.json
index 62797520fa..4721b9cb38 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "astro": "^5.1.2",
     "astro-icon": "^1.1.5",
     "astro-seo": "^0.8.4",
+    "class-variance-authority": "^0.7.1",
     "htmx.org": "^2.0.4",
     "markdown-it": "^14.0.0",
     "node-html-parser": "^7.0.1",
diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro
index e21794d446..d7ce5a06b8 100644
--- a/src/components/ui/Button.astro
+++ b/src/components/ui/Button.astro
@@ -1,9 +1,30 @@
 ---
-import SHA from './SHA.astro';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-interface Props {
-  color?: 'orange' | 'green' | 'lightblue' | 'semidarkblue';
-  size?: 'sm' | 'lg' | 'lg-full' | 'sm-mobfull';
+import SHA from '@/components/ui/SHA.astro';
+import Link from '@/components/util/Link.astro';
+
+export const buttonVariants = cva(
+  'font-bold text-white drop-shadow transition-colors text-center',
+  {
+    variants: {
+      color: {
+        orange: 'bg-nix-orange hover:bg-nix-orange-hover',
+        lightblue: 'bg-nix-blue-light hover:bg-nix-blue-light-hover',
+        semidarkblue: 'bg-nix-blue-dark hover:bg-nix-blue-dark-hover',
+        green: 'bg-nix-green hover:bg-nix-green-hover',
+      },
+      size: {
+        sm: 'px-10 py-2.5 rounded-3xl',
+        'sm-mobfull': 'px-8 py-2.5 rounded-3xl md:w-auto w-full',
+        lg: 'px-10 py-2.5 rounded-2xl md:px-14 md:py-4 w-full md:w-auto',
+        'lg-full': 'px-10 py-4 rounded-2xl block',
+      },
+    },
+  },
+);
+
+interface Props extends VariantProps<typeof buttonVariants> {
   href?: string | null;
   type?: 'button' | 'submit' | 'reset';
   classList?: string[];
@@ -13,20 +34,6 @@ interface Props {
   label?: string;
 }
 
-const colorMap = {
-  orange: 'bg-nix-orange',
-  lightblue: 'bg-nix-blue-light',
-  semidarkblue: 'bg-nix-blue-dark',
-  green: 'bg-nix-green',
-};
-
-const sizeMap = {
-  sm: 'px-10 py-2.5 rounded-3xl text-center',
-  'sm-mobfull': 'px-8 py-2.5 rounded-3xl md:w-auto w-full text-center',
-  lg: 'px-10 py-2.5 md:px-14 md:py-4 rounded-full md:rounded-2xl text-center w-full md:w-auto',
-  'lg-full': 'text-center py-4 block rounded-2xl',
-};
-
 const {
   color = 'orange',
   size = 'sm',
@@ -38,19 +45,21 @@ const {
   shaText = '',
   label,
 } = Astro.props;
-
-const localClassList = `${colorMap[color]} font-bold ${sizeMap[size]} text-white drop-shadow`;
 ---
 
 {
   href ? (
     <>
-      <a
+      <Link
         href={href}
-        class:list={['!text-white !no-underline', localClassList, classList]}
+        class:list={[
+          '!text-white !no-underline',
+          buttonVariants({ color, size }),
+          classList,
+        ]}
       >
         {label || <slot />}
-      </a>
+      </Link>
       {shaHref && (
         <SHA href={shaHref} classList={shaClassList}>
           {shaText}
@@ -58,7 +67,7 @@ const localClassList = `${colorMap[color]} font-bold ${sizeMap[size]} text-white
       )}
     </>
   ) : (
-    <button type={type} class={localClassList}>
+    <button type={type} class={buttonVariants({ color, size })}>
       <slot />
     </button>
   )
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 91ab1d498d..b8477f8047 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -64,18 +64,23 @@ module.exports = {
         extralight: '#f2f8fd', // nixlighterblue
         lighter: '#e6ecf5', // nixlighterblue-dimmed
         light: '#7ebae4', // nixlightblue
+        'light-hover': '#69a6d1',
         DEFAULT: '#5277c3', // nixdarkblue
+        hover: '#466cb9',
         dark: '#405D99', // nixsemidarkblue
+        'dark-hover': '#4e73bc',
         darker: '#27385d', // nixdarkerblue
       },
       'nix-orange': {
         lighter: '#fff5e1', // nixlightorange
         DEFAULT: '#ffab0d', // nixorange
+        hover: '#ec9d0c',
         dark: '#ff8657', // nixdarkorange
         darker: '#cc3900', // nixdarkerorange
       },
       'nix-green': {
         DEFAULT: '#6ad541', // nixgreen
+        hover: '#64c53d',
         dark: '#51ba29', // nixdarkgreen
       },
       gray: colors.gray,