Edit on
<div class="button wave-effect">Clic sur moi !</div>
<hr>
<button class="bt-envoyer wave-effect rouge" type="submit" name="button" id="button">Envoyer &raquo;</button>
.button {
  width: 300px;
  text-align: center;
  padding: 8px 12px;
  font-size: 32px;
  background-color: #E91E63;
  color: #FFF;
  border-radius: 1.5px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: box-shadow 0.3s;
  -webkit-transform: translate(-50%, -50%, 0);
  transform: translate(-50%, -50%, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.button:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.wave-effect {
  z-index: 1;
  position: relative;
  user-select: none;
}

.wave {
  position: absolute;
  border-radius: 50%;
  opacity: 1;
  z-index: -1;
  background: rgba(255, 255, 255, 0.25);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 2s cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale(0);
  pointer-events: none;
}

/*Gestion couleur du remplissage*/
.wave-effect.rouge > 
.wave{
  background-color:red;
}

.bt-envoyer {
    display:block;
    margin-left: 150px;
    padding: 10px 20px 10px 20px;
    border: solid #14759d 2px;
    overflow: hidden;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    color: #000;    
    background-color: transparent;
}
;( function( window ) {
    "use strict";

    // On lance l'affichage de la vague au touch ou au click
    if ( "ontouchstart" in window ) {
        document.body.addEventListener( "touchstart", show, false );
    }
    document.body.addEventListener( "mousedown", show, false );

} )( window );

// Cette fonction permet d'afficher une vague suite à un évènement
function show( e ) {

    var element = null;

    // On regarde si l'évènement affecte un élément avec la class .wave-effect
    var target = e.target || e.srcElement;
    while ( target.parentElement !== null ) {
        if ( target.classList.contains( "wave-effect" ) ) {
            element = target;
            break;
        }
        target = target.parentElement;
    }

    // Si aucun élement .wave-effect on abandonne, it's a TRAP !
    if ( element === null ) {
        return false;
    }

    // On crée l'élément wave et on l'ajoute à notre élement
    var wave = document.createElement( "div" );
    wave.className = "wave";
    element.appendChild( wave );

    // On anime la transformation scale() sans oublier les préfixes...
    var position = getRelativeEventPostion( element, e );
    var radius = getRadius( element, position );
    var scale = "scale(1)";
    wave.style.left = ( position.x - radius ) + "px";
    wave.style.top = ( position.y - radius ) + "px";
    wave.style.width = ( radius * 2 ) + "px";
    wave.style.height = ( radius * 2 ) + "px";
    wave.style[ "-webkit-transform" ] = scale;
    wave.style[ "-moz-transform" ] = scale;
    wave.style[ "-ms-transform" ] = scale;
    wave.style[ "-o-transform" ] = scale;
    wave.style.transform = scale;

    // Quand on quitte le bouton
    element.addEventListener( "mouseup", hide, false );
    element.addEventListener( "mouseleave", hide, false );
    if ( "ontouchstart" in window ) {
        document.body.addEventListener( "touchend", hide, false );
    }

}

// Permet de récupérer la position d'un élement sur la page
function getRelativeEventPostion( element, e ) {
    var offset = {
        top: element.getBoundingClientRect().top + window.pageYOffset - element.clientTop,
        left: element.getBoundingClientRect().left + window.pageXOffset - element.clientLeft
    };
    return {
        y: e.pageY - offset.top,
        x: e.pageX - offset.left
    };
}

// Permet d'obtenir le rayon d'un cercle qui contiendra tout l'élément, merci Pythagore ^^
function getRadius( element, position ) {
    var w = Math.max( position.x, element.clientWidth - position.x );
    var h = Math.max( position.y, element.clientHeight - position.y );
    return Math.ceil( Math.sqrt( Math.pow( w, 2 ) + Math.pow( h, 2 ) ) );
}
// Déclenché au moment d'un release, on masque la dernière vague présente
function hide( e ) {
    var element = this;

    // On trouve le dernier élement .wave
    var wave = null;
    var waves = element.getElementsByClassName( "wave" );
    if (0 === waves.length) { 
      return false; 
    } 
    wave = waves[ waves.length - 1 ];

    // On fait disparaitre la vague en opacité
    wave.style.opacity = 0;

    // On supprime l'élément vague au bout de la durée de l'animation
    setTimeout( function() {
        try {
            element.removeChild( wave );
        } catch ( e ) {
            return false;
        }
    }, 2000 );
}
Rerun