Using JavaScript to implement the ripple effect of the button example code

Here’s an example of how to implement the ripple effect on a button in JavaScript:


php code<button class="btn">Click me</button>


cssCopy code.btn {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: lightblue;
  color: white;
  cursor: pointer;

.ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  pointer-events: none;


javascript codeconst btn = document.querySelector('.btn');

btn.addEventListener('click', function(event) {
  const ripple = document.createElement('div');

  const rect = btn.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY -; = `${x}px`; = `${y}px`; = 'scale(1)';
  setTimeout(() => {
  }, 500);

This code creates a ripple effect when the button is clicked. When the button is clicked, a div element with class “ripple” is created and appended to the button. The position of the ripple is set based on the click event’s x and y coordinates relative to the button’s position. The ripple is then animated by setting its transform property to scale(1), creating the appearance of it spreading out from the point of the click. Finally, the ripple is removed after 500 milliseconds using the setTimeout function.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>