added animation in button

Author: dc7devs

src/components/modal.tsx

@@ -5,7 +5,7 @@ export default function Modal() {
     const {theme, setTheme} = useTheme()
 
     return (
-        <div className="fixed top-0 left-0 w-screen h-screen bg-white/10 backdrop-blur-sm z-40 transition-opacity ease-in-out">
+        <div className="fixed top-0 left-0 w-screen h-screen bg-white/10 dark:bg-black/10 backdrop-blur-sm z-40 transition-opacity ease-in-out">
             <div>
                 <button
                     onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}

src/components/navbar.tsx

@@ -1,13 +1,14 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { SquaresFour, X } from "phosphor-react";
+import { CircleDashed, CirclesFour, CirclesThreePlus, Plus, X } from "phosphor-react";
 import { useState } from "react";
 import Modal from "./modal";
 import ToggleThemeBtn from "./toggle-theme";
 
 export default function NavBar() {
     const router = useRouter();
     const [isOpenedModal, setIsOpenedModal] = useState(false);
+    const [effect, setEffect] = useState(false);
 
     function changeCurrentStateModal() {
         setIsOpenedModal(!isOpenedModal);
@@ -40,10 +41,16 @@ export default function NavBar() {
                 <hr className="hidden sm:block w-0.5 h-5 bg-separator/80 dark:bg-white/25 mx-5 md:mx-7 shadow-md rounded-full" />
 
                 <button
-                    onClick={() => changeCurrentStateModal()}
-                    className="relative z-50 text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70 transition duration-75 ease-in-out mr-3"
+                    className={`relative z-50 text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70 transition ${effect ? "md:animate-effect" : "md:animate-close"} duration-75 ease-in-out mr-3`}
+                    onClick={() => {
+                        setEffect(true);
+                        changeCurrentStateModal();
+                    }}
+                    onAnimationEnd={() => setEffect(false)}
                 >
-                    {isOpenedModal ? <X size={32} /> : <SquaresFour />}
+                    {
+                        effect ? <CirclesFour size={25} /> : (isOpenedModal ? <X size={25} /> : <CirclesThreePlus size={25} />)
+                    }
                 </button>
 
                 <ToggleThemeBtn />

src/components/toggle-theme.tsx

@@ -5,10 +5,11 @@ import { useEffect, useState } from "react";
 export default function ToggleThemeBtn() {
     const [mounted, setMounted] = useState(false);
     const { theme, setTheme } = useTheme();
-
+    const [effect, setEffect] = useState(false);
 
     useEffect(() => {
         setMounted(true)
+        setEffect(true);
     }, [])
 
     if(!mounted) return null; 
@@ -19,8 +20,11 @@ export default function ToggleThemeBtn() {
 
     return (
         <button
-            className="text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70"
-            onClick={() => setTheme(isDark() ? "light" : "dark")}
+            className={`text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70 ${effect && 'animate-effect-2'}`}
+            onClick={() => {
+                setTheme(isDark() ? "light" : "dark")
+            }}
+            onAnimationEnd={() => setEffect(false)}
         >
             {isDark() ? <MoonStars size={25} /> : <SunDim size={26} />}
         </button>

src/pages/index.tsx

@@ -23,7 +23,7 @@ export default function Home() {
                 developer
               </Link>
             </strong>!</p>
-            <button className="max-w-max h-8 px-2 text-xl font-regular rounded-lg text-black bg-black/25 md:ml-5 shadow-lg shadow-violet-700/25 bakcdrop-blur transition ring-1 ring-violet-700/50">
+            <button className="max-w-max h-8 px-2 text-xl font-regular rounded-lg text-black dark:text-white bg-black/25 dark:bg-white/25 md:ml-5 dark:border-1 shadow-md dark:shadow-none shadow-violet-700/25 dark:shadow-violet-300/25 bakcdrop-blur transition ring-2 ring-violet-700/30 dark:ring-violet-300/10">
               <Link href="/about">
                 more...
               </Link>

tailwind.config.js

@@ -8,6 +8,24 @@ module.exports = {
   ],
   theme: {
     extend: {
+      keyframes: {
+        effect: {
+          "0%, 100%": { transform: "rotate(50deg)" },
+          "25%": { transform: "rotate(-50deg) scale(0.5)"},
+          "50%": { transform: "translate(-30%, -20%)"},
+          "80%": {transform: "translate(-40%, 10%) rotate(0deg)"},
+          "100%": {transform: "rotate(0deg)"},
+        },
+        'effect-2': {
+          "0%, 100%": { transform: "translate(100%) rotate(20deg)" },
+          "50%": { transform: "translate(50%) rotate(-20deg)" },
+          "100%": { transform: "translate(0) rotate(0deg)" },
+        }
+      },
+      animation: {
+        effect: "effect 1s ease-in-out",
+        'effect-2': "effect-2 1s ease-in"
+      },
       colors: {
         primary: '#1E1E1E',
         separator: '#3F3F3F',