ripple button

index.html

<div id='root'>
  <button class="btn">Click</button>  
</div>

ripple-button.markdown

ripple button

A Pen by manan jain on CodePen.

License.

script.babel

// function Root()
// {
//   return <h1> Hello Peter </h1>;
// }
// ReactDOM.render(<Root/>, document.getElementById('root'));
window.addEventListener('load', ()=>{
  document.querySelectorAll('.btn').forEach(btn => btn.addEventListener('mousedown', ev => {
     ev.target.childNodes.forEach(child => child.className==="rippleSpan" && child.remove())
 const child = document.createElement('span');
    child.className = "rippleSpan";
    child.style.position = "absolute";
    child.style.top = ev.clientY + 'px';
    child.style.left = ev.clientX  + 'px';
  ev.target.appendChild(child);
  }));
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

style.css

.btn {
  all : unset;
  background : black;
  font-size : 2rem;
  padding : 10px 20px;
  position : relative;
  overflow : hidden;
  letter-spacing : 3px;
  color: white;
  border-radius : 10px;
}
.rippleSpan{
  position : absolute;
  background : white;
  transform : translate(-50%, -50%);
  pointer-events : none;
  border-radius : 50%;
  animation : ripple 4s linear 1;
}
@keyframes ripple {
  0% {
    width : 0;
    height : 0;
    opacity: 0.5;
  }
  40% {
    width : 1000%;
    height : 1000%;
    opacity: 0.2;
  }
  100% {
    width : 1000%;
    height : 1000%;
    opacity: 0;
  }
}