From 7274ba21eddc9c339a7f5498e0516751011623d3 Mon Sep 17 00:00:00 2001
From: NISHIZAWA Shuntaro <me@s2n.tech>
Date: Mon, 21 Oct 2024 09:41:47 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Button=E3=81=AB=E3=83=9B=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7?=
 =?UTF-8?q?=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/Button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index f0c4788..c3e5d66 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -17,12 +17,12 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	) => {
 		const Comp = asChild ? Slot : "button";
 		return (
-			<Comp className={cn("relative px-5 py-2")} ref={ref} {...props}>
+			<Comp className={cn("group relative px-5 py-2")} ref={ref} {...props}>
 				<div className="absolute inset-0 drop-shadow-md">
 					{background && (
 						<svg
 							className={cn(
-								"-skew-x-12 absolute inset-0 h-full w-full skew-y-6",
+								"-skew-x-12 absolute inset-0 h-full w-full rotate-6 transition-transform duration-300 group-hover:rotate-1",
 							)}
 							role="presentation"
 						>
@@ -37,7 +37,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 					)}
 					<svg
 						className={cn(
-							"-skew-y-3 absolute inset-0 h-full w-full skew-x-12 border-2 border-white",
+							"-rotate-3 group-hover:-rotate-1 absolute inset-0 h-full w-full skew-x-12 border-2 border-white transition-transform duration-300",
 						)}
 						role="presentation"
 					>