Material Design Buttons

<button class="btn material-design" data-color="#426FC5">Senden</button>

var canvas = {},  
  centerX = 0,  
  centerY = 0,  
  color = '',  
  containers = document.getElementsByClassName('material-design')  
  context = {},  
  element = {},  
  radius = 0,  

  requestAnimFrame = function () {  
  return (  
  window.requestAnimationFrame ||  
  window.mozRequestAnimationFrame ||  
  window.oRequestAnimationFrame ||  
  window.msRequestAnimationFrame ||  
  function (callback) {  
  window.setTimeout(callback, 1000 / 60);  
  }  
  );  
  } (),  
   
  init = function () {  
  containers = Array.prototype.slice.call(containers);  
  for (var i = 0; i < containers.length; i += 1) {  
  canvas = document.createElement('canvas');  
  canvas.addEventListener('click', press, false);  
  containers[i].appendChild(canvas);  
  canvas.style.width ='100%';  
  canvas.style.height='100%';  
  canvas.width = canvas.offsetWidth;  
  canvas.height = canvas.offsetHeight;  
  }  
  },  
   
  press = function (event) {  
  color = event.toElement.parentElement.dataset.color;  
  element = event.toElement;  
  context = element.getContext('2d');  
  radius = 0;  
  centerX = event.offsetX;  
  centerY = event.offsetY;  
  context.clearRect(0, 0, element.width, element.height);  
  draw();  
  },  
   
  draw = function () {  
  context.beginPath();  
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);  
  context.fillStyle = color;  
  context.fill();  
  radius += 2;  
  if (radius < element.width) {  
  requestAnimFrame(draw);  
  }  
  };  

  init();

.btn {  
  border: none;  
  color: white;  
  overflow: hidden;  
  margin: 1rem;  
  padding: 0;  
  text-transform: uppercase;  
  width: 150px;  
  outline: none;
  height: 40px;  
  background-color: transparent;  
  border: 2px solid #426FC5;  
  color: #426FC5;  
  }  
  .material-design {  
  position: relative;  
  }  
  .material-design canvas {  
  opacity: 0.25;  
  position: absolute;  
  top: 0;  
  left: 0;  
  }