0.0.96

css/main.css

@@ -196,6 +196,13 @@ button:disabled ~ .loader {
   text-transform: capitalize;
 }
 
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  border: 1.5rem solid rgba(var(--text-color), 0.2);
+}
+
 sm-button[variant=outlined] {
   --accent-color: rgba(var(--text-color), 1);
 }
@@ -849,9 +856,9 @@ details p {
   border-radius: 0.4rem;
   width: 5rem;
   text-transform: capitalize;
-  transition: transform 0.3s;
   -webkit-tap-highlight-color: transparent;
   cursor: pointer;
+  overflow: hidden;
 }
 .option .icon {
   height: 3rem;
@@ -866,9 +873,6 @@ details p {
   opacity: 0.8;
   font-weight: 500;
 }
-.option:active {
-  transform: scale(0.95);
-}
 
 .request-icon {
   transform: rotate(180deg);

css/main.scss

@@ -192,6 +192,13 @@ button {
     text-transform: capitalize;
 }
 
+span.ripple{
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    border: 1.5rem solid rgba(var(--text-color), 0.2);
+}
+
 sm-button[variant="outlined"]{
     --accent-color: rgba(var(--text-color), 1);
 }
@@ -862,9 +869,9 @@ details{
     border-radius: 0.4rem;
     width: 5rem;
     text-transform: capitalize;
-    transition: transform 0.3s;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
+    overflow: hidden;
     .icon {
         height: 3rem;
         width: 3rem;
@@ -879,10 +886,6 @@ details{
         opacity: 0.8;
         font-weight: 500;
     }
-
-    &:active {
-        transform: scale(0.95);
-    }
 }
 
 .request-icon{

index.html

@@ -2169,6 +2169,39 @@
                 }
             })
 
+            document.addEventListener('click', (e) => {
+                if (e.target.closest('.option')) {
+                    createRipple(e, e.target.closest('.option'))
+                }
+            })
+
+            function createRipple(event, target){
+                const ripple = target.querySelector('.ripple');
+                const circle = document.createElement("span");
+                const diameter = Math.max(target.clientWidth, target.clientHeight);
+                const radius = diameter / 2;
+                circle.style.width = circle.style.height = `${diameter}px`;
+                circle.style.left = `${event.clientX - (target.offsetLeft + radius)}px`;
+                circle.style.top = `${event.clientY - (target.offsetTop + radius)}px`;
+                circle.classList.add("ripple"); 
+                const rippleAnimation =  circle.animate([
+
+                    {
+                        transform: 'scale(4)',
+                        opacity: 0
+                    }
+                ],
+                    {
+                        duration: 600,
+                        fill: "forwards",
+                        easing: 'ease-out'
+                    })
+                target.append(circle);
+                rippleAnimation.onfinish = () => {
+                    circle.remove()
+                }
+            }
+
             //Function for handling contact click event
 
             peopleContainer.addEventListener('click', e => {