Unique ripple effect animation on hover that follows cursor

Created this cool-looking ripple effect animation on the button. It can be implemented on any other element other than buttons. The expanding ripple / circular shape follows mouse/pointer movement during the mouseenter and mouseleave event. The supporting script is in pure javascript and not jQuery so no need to include any other script.

Demo

See the Pen Unique ripple effect animation on hover that follows cursor by Puneet Sharma (@webdevpuneet) on CodePen.

---

HTML

<button type="button" class="ripple-effect"><em></em><span class="me-3">Logout</span></button>

CSS

button{
  font-size:30px;
  padding:15px 50px;
}
/* Button Ripple effect */
.ripple-effect {
  position: relative;
  overflow: hidden; }
  .ripple-effect * {
    position: relative;
    transition: .15s ease-in-out; }
  .ripple-effect em {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #ffffff;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: 0; }
  .ripple-effect svg {
    transition: .15s ease-in-out; }
  .ripple-effect:hover {
    color: #161616; }
    .ripple-effect:hover * {
      fill: #161616; }
    .ripple-effect:hover em {
      width: 300%;
      height: 300%; }

---

JavaScript

/*  script for ripple effect on button */
document.querySelectorAll('.ripple-effect').forEach(item => {
    item.addEventListener('mouseenter', event => {
        let oLeft = event.pageX - item.getBoundingClientRect().left;
        let oTop = event.pageY - item.getBoundingClientRect().top;
        const em = item.querySelector('em');
        em.style.top = oTop+'px';
        em.style.left = oLeft+'px';
        console.log(em.style.left);
    });
    item.addEventListener('mouseleave', event => {
        let oLeft = event.pageX - item.getBoundingClientRect().left;
        let oTop = event.pageY - item.getBoundingClientRect().top;
        const em = item.querySelector('em');
        em.style.top = oTop+'px';
        em.style.left = oLeft+'px';
        console.log(em.style.left);
    });
});