feat: ボタンを実装

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>
   );