A faithful recreation of Google's material ripple effect
ripple {position: absolute;background-color: white;border-radius: 50%;opacity: .3;pointer-events: none;}
ripple.ripple-closing{opacity:0}Note To display the ripple effect correctly, elements need their
positions to be set torelative
<button onmousedown="ripple({
'node': this,
'speed': .3,
'size': .7,
'maxSize': 1.3
})"> Some text </button>document.querySelectorAll('button').forEach(element => {
element.addEventListener('mousedown', ()=> {
ripple({'node':element,
'speed': .3,
'size': .7,
'maxSize': 1.3
})
})
})document.addEventListener('mousedown', (e)=> {
if (e.target.tagName === 'BUTTON') {
ripple({'node':e.target,
'speed': .8,
'size': .5,
'maxSize': 1.3
})
}
})Note If you want to use the ripple effect on certain elements tagged with an attribute, go with
e.target.hasAttribute('ripple')
.class > ripple {
background-color: rgb(18, 165, 140);
}Note Depending on your case, an
!importantmay be needed