fix button hover effect

HackAtUCI · Nov 24, 2024 · a163f9a · a163f9a
1 parent 2bfe3b7
commit a163f9a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 22 deletions.
diff --git 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
@@ -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>
 	);
 };