Hi @Chiranjeevi Balaji ,

I've tried to achieve this ripple effect on button and it is working.

CSS used:

/* Button with Ripple Effect */

.button-ripple {

  position: relative;

  overflow: hidden;

  padding: 10px 20px;

  border: 2px solid #007bff; /* Customize the border color */

  background-color: #007bff; /* Customize the button background */

  color: white;

  font-size: 16px;

  cursor: pointer;

  text-align: center;

  border-radius: 4px; /* Optional: Add rounded corners */

  transition: background-color 0.3s, border-color 0.3s;

}

.button-ripple:hover {

  background-color: #0056b3; /* Hover background color */

  border-color: #0056b3; /* Hover border color */

}

/* Ripple effect styling */

.button-ripple::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  height: 2px; /* Thickness of the ripple */

  background-color: rgba(255, 255, 255, 0.5); /* Ripple color */

  transform: scaleX(0);

  transform-origin: left center;

  transition: transform 0.3s ease-in-out;

  opacity: 0;

}

/* Ripple Effect on Hover */

.button-ripple:hover::before {

  transform: scaleX(1);

  opacity: 1;

}

On button you can give ".button-ripple" class. 

This is just an example how you can apply ripple effect on button, you can also try with others elements also.


Thanks & Regards,
Shad

Hello,

Attached an oml with the ripple effect based on the position of mouse click and other with the normal behavior