Material design click animation effect using SCSS + JS

Material-Buttons.markdown

Material Buttons

Lightweight script for adding Material design buttons animation effect using pure CSS and JS

Credits: Diego Martín Mármol

material.button.js

/**
 * Material Button animation
 */
$(function(){
	var ink, d, x, y;
	var circle = document.createElement('span');
		circle.classList.add('ink');
	var button = document.querySelector('.material-button');
	button.addEventListener("click", function(e) {
		if( this.querySelector('.ink') === null ) {
			this.insertBefore(circle, this.firstChild);
		}
		ink = this.querySelector('.ink');
		ink.classList.remove('animate');
	
		if( !ink.offsetHeight && !ink.offsetWidth ) {
		    d = Math.max( this.offsetWidth, this.offsetHeight );
		    ink.style.height = d+'px';
		    ink.style.width = d+'px';
		}
	
		var rect = this.getBoundingClientRect();
		var coords = {
			top: rect.top + document.body.scrollTop,
			left: rect.left + document.body.scrollLeft
		}
	
		x = e.pageX - coords.left - (ink.offsetWidth / 2);
		y = e.pageY - coords.top - (ink.offsetHeight / 2);
	
		ink.style.top = y+'px';
	    ink.style.left = x+'px';
	    ink.classList.add('animate');
	});
});

material.button.scss

///
// _material.button.scss
// Botones estilo material design. Redefininen a los de foundation
///

.button {
	border-radius: $master-radius;    
	// box-shadow: 0 2px 6px -1px black(0.4);
}

.material-button {
	text-decoration:none;
	position:relative;
	overflow:hidden;
	transition: all 0.2s ease;
	z-index:0;
	&:hover{
		z-index:1000;
		transition: all 0.2s ease;
		box-shadow: 0 16px 16px 0 black(0.3);
	}
}

.ink {
	display: block;
	position: absolute;
	background: white(0.3);
	border-radius: 100%;
	transform: scale3d(0,0,0);
	&.animate {
		animation: ripple 0.65s linear;
	}
}

@keyframes ripple {
    100% {
    	opacity: 0; 
    	transform: scale3d(2.5,2.5,2.5);
    }
}