ripple button

index.css

/* Set the colour of the effect */
.bn .ripple-effect {
  background: #206aae;
}

/* Some default button styling */
.bn {
	padding: 1em 2em;
	background: #2e85d6;
	color:#fff;
	display: inline-block;
  text-decoration:none;
}

.btn .ripple-effect {
  background: #206aae;
}

/* Some default button styling */
.btn {
	padding: 1em 2em;
	background: #2e85d6;
	color:#fff;
	display: inline-block;
  text-decoration:none;
}

/* Ripple Styling */
.ripple-button {
	position: relative;
}
.ripple-button .ripple-effect-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	z-index: 0;
	overflow: hidden;
}
.ripple-button .ripple-effect {
	position: absolute;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.ripple-button .ripple-content {
	position: relative;
	z-index: 1;
}

index.html

<a href="#" class="btn">1 Material Design Ripple Button
</a>

<a href="#" class="btn">2 Material Design Ripple Button
</a>

<a class="bn ripple-button">
  <div class='ripple-effect-layer'>
  <div class='ripple-effect' style="width:100px;height:100px;top:40px;left:50px;"></div>
  </div>
  <div class="ripple-content"> + content + `</div>
</a>

index.js

function ripple( el ) {

	// Add the effect-layer and wrap the existing content
	var content = el.innerHTML;
	el.innerHTML = `
		<div class='ripple-effect-layer'></div>
		<div class="ripple-content">` + content + `</div>`;

	// Class up the button
	el.className = el.className + " ripple-button";

	// Bind the animation
	el.addEventListener( "click", function(e) {
		
		var effectLayer = el.querySelector(".ripple-effect-layer"),
			effect = document.createElement("div"),
			effectSize = this.clientWidth * 2;

		// Position the effect
		effect.style.left = e.offsetX + "px";
		effect.style.top = e.offsetY + "px";

		// Size it up
		effect.style.width = 0;
		effect.style.height = 0;

		// Class it up 
		effect.className = "ripple-effect";

		// Deploy the effect element
		effectLayer.appendChild(effect);

		// Animate away
		rafimate( effect, "width", effectSize, 300 );
		rafimate( effect, "height", effectSize, 300, function() {
			effect.style.transition = "opacity 0.6s ease";
			effect.style.opacity = 0;
			setTimeout( function() {
				effectLayer.removeChild(effect);
			}, 650);
		});

	});


	function getStyleProp(el, prop) {
		var val = window.getComputedStyle( el,null ).getPropertyValue(prop);
		return parseInt( val.replace(/[a-z]/g, "") );
	}
	

	function rafimate( el, property, endingPos, duration, callback ) {

		var startingPos = getStyleProp( el, property );
		
		var difference = endingPos - startingPos;

		var timestamp = Date.now();

		var step = startingPos;

		function animate() {

			var timeDifference = Date.now() - timestamp;
			var fps = 1000 / timeDifference;
			var frameInterval = ( difference / fps ) * ( 1000 / duration ); 

			if ( step > endingPos ) 
				step = step - ( step - endingPos );
						
			el.style[property] = step + "px"
			timestamp = Date.now();

			if ( step < endingPos ) {
				step = step + frameInterval;
				return requestAnimationFrame( animate );
			} else {
				if ( callback ) 
					callback();
			}
		  
		};
		requestAnimationFrame( animate );
	}
}

// Call it like this 
var btns = document.querySelectorAll(".btn");
btns.forEach(e => { ripple(e); })