feat: add "cool hover" to buttons

components/Button/Button.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-
+import CoolHover from '../CoolHover/CoolHover';
 import styles from './Button.module.css';
 
 /**
@@ -16,10 +16,21 @@ import styles from './Button.module.css';
  */
 
 export default function Button(ctx) {
-	const { children, className, isPrimary, isIcon, onClick } = ctx;
+	const { children, className, isPrimary, isIcon, onClick, style } = ctx;
 	return (
-		<button className={classNames(styles.button, { [styles.primary]: isPrimary, [styles.icon]: isIcon }, className)} onClick={onClick}>
-			{children}
-		</button>
+		<CoolHover
+			bgColor={isPrimary ? 'var(--accent-shade-0)' : 'var(--bg-shade-3)'}
+			hoverColor={isPrimary ? 'var(--accent-shade-1)' : 'var(--bg-shade-3-5)'}
+			style={{
+				borderRadius: '6px',
+				width: 'fit-content',
+				height: 'fit-content',
+				...style
+			}}
+		>
+			<button className={classNames(styles.button, { [styles.primary]: isPrimary, [styles.icon]: isIcon }, className)} onClick={onClick}>
+				{children}
+			</button>
+		</CoolHover>
 	);
 }

components/Button/Button.module.css

@@ -1,6 +1,6 @@
 .button {
 	appearance: none;
-	background: var(--bg-shade-3);
+	background: none;
 	color: var(--text-shade-3);
 	border: 0;
 	border-radius: 6px;
@@ -18,13 +18,9 @@
 }
 
 .button:hover {
-	background: var(--bg-shade-3-5);
-}
-
-.button.primary {
-	background: var(--accent-shade-0);
+	box-shadow: 0 0 0 1px var(--bg-shade-4) inset;
 }
 
 .button.primary:hover {
-	background: var(--accent-shade-1);
+	box-shadow: 0 0 0 1px var(--accent-shade-3) inset;
 }

components/CoolHover/CoolHover.js

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import styles from './CoolHover.module.css';
+import classNames from 'classnames';
+
+/**
+ * A reusable component to make a cool hover effect.
+ *
+ * @param {string} hoverColor - The hover color.
+ * @param {string} bgColor - The background color.
+ * @param {string} radius - The radius of the hover effect.
+ *
+ * @example
+ * <a href="/pizza">
+ * 	<CoolHover hoverColor="var(--accent-shade-3)" bgColor="var(--accent-shade-2)">
+ * 	  Click for Pizza
+ * 	</CoolHover>
+ * </a>
+ *
+ */
+
+export default function CoolHover(ctx) {
+	const { hoverColor, bgColor, children, className, radius, style } = ctx;
+
+	const [ pos, setPos ] = useState({ x: 0, y: 0 });
+	const [ active, setActive ] = useState( false );
+
+	return (
+		<div
+			style={{
+				width : '100%',
+				height: '100%',
+				cursor: 'pointer',
+				backgroundColor: bgColor,
+				backgroundImage: active ? `radial-gradient(circle ${radius || '256px'} at ${pos.x}px ${pos.y}px, ${hoverColor}, ${bgColor})` :  bgColor,
+				//transform: active ? 'scale(1.03)' : 'scale(1)',
+				//transition: 'transform 200ms'
+				...style
+			}}
+			className={classNames(className, styles.coolHover)}
+			onMouseMove={(e) => {
+				setActive(true);
+				setPos({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY });
+			}}
+			onMouseLeave={() => setActive(false)}
+		>
+			{ children }
+		</div>
+	);
+}

components/CoolHover/CoolHover.module.css

@@ -0,0 +1,3 @@
+.coolHover * {
+	pointer-events: none;
+}