From a163f9a6a822b181ac63b9e6398a1adcbb281ffd Mon Sep 17 00:00:00 2001
From: Albert Wang <alberw5@uci.edu>
Date: Sat, 23 Nov 2024 19:51:21 -0800
Subject: [PATCH] fix button hover effect

---
 .../lib/components/Button/Button.module.css   |  9 +++-
 .../site/src/lib/components/Button/Button.tsx | 44 ++++++++++---------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/apps/site/src/lib/components/Button/Button.module.css b/apps/site/src/lib/components/Button/Button.module.css
index 8d5674b1..2558a2b9 100644
--- a/apps/site/src/lib/components/Button/Button.module.css
+++ b/apps/site/src/lib/components/Button/Button.module.css
@@ -8,9 +8,14 @@
 	display: block;
 	width: max-content;
 	margin: 0 auto;
+}
+
+.buttonBox {
+	display: inline-block;
+	background-color: white;
 
-	&:hover {
-		box-shadow: 8px 8px 0px var(--color-white);
+	&:hover > .button {
+		transform: translate(-8px, -8px);
 		filter: brightness(1.05);
 	}
 }
diff --git a/apps/site/src/lib/components/Button/Button.tsx b/apps/site/src/lib/components/Button/Button.tsx
index 113e284b..d280038d 100644
--- a/apps/site/src/lib/components/Button/Button.tsx
+++ b/apps/site/src/lib/components/Button/Button.tsx
@@ -25,29 +25,33 @@ const Button: React.FC<ButtonProps> = ({
 }) => {
 	if (href) {
 		return (
-			<Link
-				href={href}
-				className={clsx(
-					styles.button,
-					isLightVersion && styles.lightButton,
-					isLightVersion ? "font-display" : "font-body",
-					className,
-				)}
-				prefetch={usePrefetch}
-			>
-				{text}
-			</Link>
+			<div className={styles.buttonBox}>
+				<Link
+					href={href}
+					className={clsx(
+						styles.button,
+						isLightVersion && styles.lightButton,
+						isLightVersion ? "font-display" : "font-body",
+						className,
+					)}
+					prefetch={usePrefetch}
+				>
+					{text}
+				</Link>
+			</div>
 		);
 	}
 	return (
-		<button
-			type="submit"
-			className={styles.button + " font-display"}
-			disabled={disabled}
-			style={style ? style : { width: "max-content" }}
-		>
-			{text}
-		</button>
+		<div className={styles.buttonBox}>
+			<button
+				type="submit"
+				className={styles.button + " font-display"}
+				disabled={disabled}
+				style={style ? style : { width: "max-content" }}
+			>
+				{text}
+			</button>
+		</div>
 	);
 };