<div class="container">
    <button class="material-button ripple">Botón</button>
    <button class="material-button material-button-invisible ripple">Botón</button>
</div>
*, body * {
    margin: 0;
    padding: 0;
}

body {
    align-items: center;
    background-color: #FFF;
    display: flex;
    height: 100vh;
    justify-content: center;
}

.container {
    align-items: center;
    display: flex;
    justify-content: space-around;
    max-width: 660px;
    width: 100%;
}

.material-button {
    background-color: #EE6E73;
    border: none;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    outline: 0;
    padding: 1.2em 1.8em;
    text-transform: uppercase;
    transition: all 0.2s ease;
  
    &:hover {
        box-shadow: none;
    }
}

.material-button-invisible {
    background-color: transparent;
    box-shadow: none;
    color: rgb(238, 110, 115);
  
    &:hover {
        background-color: rgba(238, 110, 115, 0.2);
    }
}

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    background: rgba(255, 255, 255, 0.4);
    animation: ripple-animation 2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes ripple-animation {
    from { opacity: 1; transform: scale(0) }
    to { opacity: 0; transform: scale(1) }
}

.material-button-invisible .ripple-effect {
    background-color: rgba(238, 110, 115, 0.4);
}
View Compiled
document.querySelectorAll('.ripple').forEach(ripple => {
  ripple.addEventListener('mousedown', e => {

    let posX = e.pageX - ripple.getBoundingClientRect().left;
    let posY = e.pageY - ripple.getBoundingClientRect().top;
    let buttonWidth = 1.5 * ripple.offsetWidth;

    let divRippleEffect = document.createElement('div');
    divRippleEffect.className = 'ripple-effect';
    divRippleEffect.style.width = `${buttonWidth}px`;
    divRippleEffect.style.height = `${buttonWidth}px`;
    divRippleEffect.style.left = `${ posX - (buttonWidth / 2) }px`;
    divRippleEffect.style.top = `${ posY - (buttonWidth / 2) }px`;

    ripple.appendChild(divRippleEffect);

    window.setTimeout(() => {
      ripple.removeChild(divRippleEffect);
    }, 2000);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.