Animation added

Workly/src/pages/Signup/components/ButtonGroup.Modules.css

@@ -11,7 +11,7 @@
     width: 12rem;
     height: 12rem;
     border-radius: 50%; /* Makes it round */
-    border: none;
+    border: 3px solid transparent;
     background-color: #ffffff;
     color: white;
     border: 1px solid lightgray;
@@ -29,11 +29,44 @@
 }
 
 .round-button:active {
-    border: 3px solid rgb(0, 0, 0); /* Visible border when active */
+    border: 3px solid rgb(255, 255, 255); /* Visible border when active */
+}
+
+@keyframes fill-border {
+    0% {
+      border-top: 3px solid transparent;
+      border-right: 3px solid transparent;
+      border-bottom: 3px solid transparent;
+      border-left: 3px solid transparent;
+    }
+    25% {
+      border-top: 3px solid transparent;
+      border-right: 3px solid black;
+      border-bottom: 3px solid transparent;
+      border-left: 3px solid transparent;
+    }
+    50% {
+      border-top: 3px solid transparent;
+      border-right: 3px solid black;
+      border-bottom: 3px solid black;
+      border-left: 3px solid transparent;
+    }
+    75% {
+      border-top: 3px solid transparent;
+      border-right: 3px solid black;
+      border-bottom: 3px solid black;
+      border-left: 3px solid black;
+    }
+    100% {
+        border-top: 3px solid black;
+        border-right: 3px solid black;
+        border-bottom: 3px solid black;
+        border-left: 3px solid black;
+    }
 }
 
 .round-button.active {
-    border: 3px solid black !important; /* Ensures the border stays */
+    animation: fill-border 0.1s cubic-bezier(0.42, 0, 1, 1) forwards;
     transform: scale(1.1);
 }
 
@@ -53,7 +86,7 @@
     box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 1);
 }
 
-.continue-button:hover{
+.continue-button.active:hover{
     transform: scale(1.05);
 }
 
@@ -66,9 +99,18 @@
     
 }
 
+.continue-button.inactive {
+    background-color: gray; /* Inactive button color */
+    color: #ccc; /* Change the text color to gray when inactive */
+    cursor: not-allowed; /* Make the cursor show as not-allowed */
+  }
+
+  .continue-button.active {
+    background-color: black;
+    color: white;
+  }
 .buttonTitle{
     text-align: center;
-    margin: 3rem auto;
     font-size: 2.5rem;
     color: black;
     position:relative;

Workly/src/pages/Signup/components/ButtonGroup.tsx

@@ -30,7 +30,7 @@ const ButtonGroup = () => {
         )}
       </button>
     </div>
-    <button className="continue-button">
+    <button className={`continue-button ${activeButton ? "active" : "inactive"}`}>
         <div className="buttonTitle">
             CONTINUE <span className="line-md--arrow-up"></span>
         </div>