CSS Material Button Animation Test

by amindunited

HTML

<h1>
  CSS Button Animation Test 
</h1>
<button class="button_1">
  Button!
</button>

CSS

button {
  background-color: #000099;
  border: none;
  border-radius: 3px;
  color: white;
  padding: 5px;
  width: 80px;
  height: 45px;
  line-height: 35px;
  text-align: center;
  position: relative;
}
button:focus {
  outline: none;
}
button .anim {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  overflow: hidden;
  top: 0px;
  left: 0px;
}
button .anim .ripple {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  left: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .25);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
}
button.touched .anim .ripple {
  transition: width .600s ease-in-out, height .600s ease-in-out, opacity .600s ease-in-out;
  opacity: 0.5;
}

JavaScript

var btn_1 = document.querySelector('button.button_1');
console.log('btn_1', btn_1);

var cumulativeOffset = function(element) {
  var top = 0, left = 0;
  do {
    top += element.offsetTop  || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while(element);

  return {
    top: top,
    left: left
  };
};


btn_1.addEventListener('mousedown', function (e) {
	var animDiv = document.createElement('div');
  animDiv.classList.add('anim');
  e.target.appendChild(animDiv);
  
  var rippleDiv = document.createElement('div');
  rippleDiv.classList.add('ripple');
  animDiv.appendChild(rippleDiv);
  
  //var animDiv = document.createElement('div');
  //e.target.appendChild(animDiv);
  
  var parentOffset = cumulativeOffset(e.target);
  console.log('click was ', e);
  rippleDiv.style.left = e.offsetX + 'px';// - (e.target.offsetWidth/2) ) + 'px';
  rippleDiv.style.top = e.offsetY + 'px';// - (e.target.offsetWidth/2) ) + 'px';
  //animDiv.style.width = ;
  var diameter = Math.max(e.target.offsetHeight, e.target.offsetWidth);
  /**
  *	The size of the circle needs to be the largest of the height and width
  * plus the distance that the click was from the center
  */
  var clickRadius;
	var parentCenterX = e.target.offsetWidth/2;
  var parentCenterY = e.target.offsetHeight/2;
  var clickX = e.offsetX;
  var clickY = e.offsetY;
  var xVal = parentCenterX - clickX;
  var yVal = parentCenterY - clickY;
  var radius = Math.sqrt((xVal*xVal) + (yVal * yVal));
  diameter += (radius)*2.5;
  console.log('radius ', radius, xVal, yVal);
  setTimeout(function() {
  	
  	setTimeout(function() {
    	e.target.removeChild(animDiv);
      e.target.classList.remove('touched');
    }, 700);

  	e.target.classList.add('touched');
    
    rippleDiv.style.width  = diameter + 'px';
    rippleDiv.style.height = diameter + 'px';
  }, 1);
});