A ripple button creates a semi-transparent circle that expands from the click position and fades out in 0.6s. Originating from Material Design, it gives static buttons tactile feedback — confirming "your click was received."
Key implementation: Button needs position: relative + overflow: hidden. Ripple diameter = Math.max(offsetWidth, offsetHeight) to cover the entire button. Convert viewport coords to button-local coords via getBoundingClientRect(). Text gets z-index: 1 to stay above ripple. Set pointer-events: none on ripple span.
Common pitfalls: Missing overflow: hidden lets ripple leak outside. Diameter too small only covers part of button. Missing z-index on text makes it invisible during ripple. Forgetting to remove() the span causes memory leaks. Use transform: scale (GPU) not width/height (layout reflow).
Variants: Auto-contrast ripple color, stacked ripples for rapid clicks, square ripple for industrial UI, delayed fade for important actions, touch event support for mobile.
Full copy-paste code available above. Questions? Leave a comment.
Top comments (0)