SOURCE

// 基本效果
function RippleEffect(element){
    this.element = element;
    this.element.addEventListener('mousedown', this.run.bind(this), false);
}
RippleEffect.prototype = {
    run: function(event){
        var ripplerContainer = this.element.querySelector('.ripple-container');
        var offsetInfo = this.element.getBoundingClientRect();
        
        var rippleContainer = document.createElement('div');
        rippleContainer.style.position = 'fixed';
        rippleContainer.style.zIndex = 99;
        rippleContainer.style.width = offsetInfo.width + 'px';
        rippleContainer.style.left = offsetInfo.left + 'px';
        rippleContainer.style.top = offsetInfo.top + 'px';
        rippleContainer.style.height = offsetInfo.height + 'px';
        rippleContainer.className = 'ripple-container';
        rippleContainer.style.overflow = 'hidden';
        this.element.appendChild(rippleContainer);

        var maxLength = offsetInfo.width > offsetInfo.height ? offsetInfo.width : offsetInfo.height;

        var circleD = maxLength * 2;

        var ripple = document.createElement('div');
        ripple.style.position = 'absolute';
        ripple.style.width = circleD + 'px';
        ripple.style.height = circleD + 'px';
        ripple.style.borderRadius = '50%';
        ripple.style.left = ((event.pageX - offsetInfo.left) - circleD/2) + 'px';
        ripple.style.top = ((event.pageY - offsetInfo.top) - circleD/2) + 'px';
        ripple.className = 'ripple';
        rippleContainer.appendChild(ripple);
        ripple.addEventListener('animationend', function(){
            rippleContainer.remove();
        }.bind(this), false);
    }
};

// 应用

 // just add effect to elements
Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function (element) {
	// find all elements and attach effect
	new RippleEffect(element); // element is instance of javascript element node
});

<button data-ripple>
        Demo button 1
    </button>
    <button data-ripple>
        Demo button 2
    </button>
    <button data-ripple>
        Demo button 3
    </button>
    <button data-ripple>
        Demo button 4
    </button>
    <button data-ripple>
        Demo button 5
    </button>
    <div class="test-div" data-ripple>
        Demo div
    </div>

.ripple-container {
        }

            .ripple-container .ripple {
                background-color: rgba(255,255,255,0.4);
                animation: ripple 2s forwards cubic-bezier(.3,1.02,.97,.66);
            }

        @keyframes ripple {
            0% {
                transform: scale(0);
                opacity: 1;
            }

            80% {
                transform: scale(1);
            }

            100% {
                opacity: 0;
            }
        }

        button {
            background-color: dodgerblue;
            color: white;
            padding: 10px 20px;
            border: 0;
            font-size: 14px;
            cursor: pointer;
        }

        .test-div {
            margin-top:50px;
            width: 300px;
            height: 100px;
            color:#FFFFFF;
            background: #3f51b5;
        }