FinalRipple

cssRippleFinal.css

.btn {
  margin: 50px auto;
  border-radius: 25px;
  background-color: #5300e8;
  box-shadow: 0 2px 4px 0 #888888;
  display: inline-block;
  padding: 15px 50px;
  color: #ffffff;
}

.center {
  text-align: center
}


.ripple {
  position: relative;
  overflow: hidden;
}
.ripple .ripple--container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.ripple .ripple--container span {
  transform: scale(0);
  border-radius: 100%;
  position: absolute;
  opacity: 0.75;
  background-color: #ffffff;
  animation: ripple 850ms;
}

@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}

JsRippleFinal.js

const {React} = window;
const {ReactDOM} = window;

class Ripple extends React.Component {
  constructor(props) {
    super(props);
  }

  callCleanUp(cleanup, delay) {
      var bounce;
      return function() {
        const target = arguments[0].currentTarget;
        clearTimeout(bounce);
        bounce = setTimeout(function() {
          cleanup(target);
        }, delay);
      }
  }

  showRipple(e) {
    const rippleContainer = e.currentTarget;
    const size = rippleContainer.offsetWidth;
    const pos = rippleContainer.getBoundingClientRect();
    const x = e.pageX - pos.x - (size / 2);
    const y = e.pageY - pos.y - (size / 2);
    const style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
    const rippler = document.createElement('span');
    rippleContainer.appendChild(rippler);
    return rippler.setAttribute('style', style);
  }

  cleanUp(elt) {
    while (elt.firstChild) {
      elt.removeChild(elt.firstChild);
    }
  }

  render() {
    const {children= null, classes = "", onClickHandler = null} = this.props;
    return (
      <div ref="targetElement" className={classes + ' ripple'} onClick={onClickHandler} >
        {children}
        <div className="ripple--container" onMouseDown={this.showRipple} onMouseUp={this.callCleanUp(this.cleanUp, 2000)}></div>
      </div>
    );
  }
}


const App = (
  <div className="center">
    <h1 className="demo"></h1>
    <Ripple classes="btn">Click Me</Ripple>
  </div>
);



ReactDOM.render(
  App,
  document.getElementById("app")
);