src/index.css

@@ -16,7 +16,7 @@
   --background-accent: #222222;
 
   /* @layout/border-radius/rounded */
-  --radius: 0.25rem;
+  --radius: 0.5rem;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 80vw, 100rem);
@@ -176,3 +176,16 @@ h6 {
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   border: 1px solid var(--color-secondary-cta);
 }
+
+.primary-button,
+.secondary-button {
+  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
+}
+
+.primary-button:hover {
+  animation: button-lift-glow-primary 0.4s ease-out forwards;
+}
+
+.secondary-button:hover {
+  animation: button-lift-glow-secondary 0.4s ease-out forwards;
+}

src/styles/animations.css

@@ -169,3 +169,22 @@
 .animate-progress {
   animation: progress linear forwards;
 }
+
+@keyframes button-lift-glow-primary {
+  100% {
+    transform: translateY(-2px);
+    box-shadow:
+      color-mix(in srgb, var(--color-background) 15%, transparent) 0px 4px 10px 0px inset,
+      color-mix(in srgb, var(--color-background) 15%, transparent) 0px -4px 8px 0px inset,
+      0 0 8px var(--primary-cta);
+  }
+}
+
+@keyframes button-lift-glow-secondary {
+  100% {
+    transform: translateY(-2px);
+    box-shadow:
+      0 1px 2px 0 rgb(0 0 0 / 0.05),
+      0 0 8px var(--secondary-cta-text);
+  }
+}