From 2414b32b37e056d6f2c986b6c4c44db753babf0c Mon Sep 17 00:00:00 2001
From: void2610 <izumisan2610@gmail.com>
Date: Mon, 23 Oct 2023 20:49:04 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageTransitionButton.tsx | 45 ++++++++++++++-----------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/PageTransitionButton.tsx b/src/components/PageTransitionButton.tsx
index c6b94e0..623899b 100644
--- a/src/components/PageTransitionButton.tsx
+++ b/src/components/PageTransitionButton.tsx
@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
 import { motion } from "framer-motion";
+import { useState } from "react";
 
 export const PageTransitionButton = ({
   buttonText,
@@ -9,38 +10,44 @@ export const PageTransitionButton = ({
   nextPage: string;
 }) => {
   const router = useRouter();
+  const [isClicked, setIsClicked] = useState(false);
 
   const handleClick = () => {
+    setIsClicked(true);
     router.push("/contents/" + nextPage, undefined, { scroll: false });
-    return;
   };
 
   return (
     <div onClick={handleClick}>
       <motion.div
         style={{
-          width: "8vw",
-          height: "4vw",
-          backgroundColor: "white",
+          display: "flex",
+          alignItems: "center", // 垂直方向の中央寄せ
+          justifyContent: "center", // 水平方向の中央寄せ
           cursor: "pointer",
+          backgroundColor: "white",
+          textAlign: "center",
+          verticalAlign: "middle",
+          textDecoration: "none",
+          position: "relative",
+          margin: "auto",
+          width: "18vw",
+          height: "6vw",
+          padding: "0.5vw 5vw",
+          fontWeight: "bold",
+          borderRadius: "1.2vw",
+          color: "#27acd9",
+          border: "0.5vw solid #27acd9",
+          fontSize: "2.5vw",
+        }}
+        initial={{
+          boxShadow: "0.7vw 0.7vw #27acd9",
         }}
-        whileTap={{
-          scale: 0.8,
-          boxShadow: "0 0 1vw rgba(0, 0, 0, 0.3)",
+        animate={{
+          boxShadow: isClicked ? "0vw 0vw #27acd9" : "0.7vw 0.7vw #27acd9",
         }}
       >
-        <p
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100%",
-            color: "black",
-            fontSize: "1.3vw",
-          }}
-        >
-          {buttonText}
-        </p>
+        {buttonText}
       </motion.div>
     </div>
   );