Button Ripple Effect

Today I learned how to create a button that tracks user coordinates as a user clicks. I learnt how to

  • make an element scale and disappear completely after it appears with CSS's transform and animation property
  • remove elements from DOM after animation is complete to prevent performance degradation from excessive DOM elements
  • to add properties to elements dynamically using the appendChild() method
  • when using the 'this' keyword, we need to use traditional functions
  • creating a new span element on click to show the ripple effect
  • determine the position where a mouse click happens on x and y axis
  • allow dynamic positioning inside the butotn based on click coordinates
  • how to use index parameter to track button numbers
  • create a div element and add it before another node using the parentNode property

File Info

Category HTML / JS / CSS
Credits 50 Projects in 50 days
Date February 5th, 2025
Codepen Click here