Draw in div

Google Click Effect

by Lazaro Contreras

HTML

<div class="boton blue">Dame click!</div>
<div class="boton red">No a Mi!!</div>
<div class="boton green">Mejor a Mi!!!</div>

CSS

.c{
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:1px;
  height:1px;
  background:rgba(255, 255, 255, 0.5);
  border-radius:50%;
  opacity:1;
  transition: 1.8s all;
}
.boton{
  position: relative;
  display: inline-block;
  border: none;
  color: white;
  overflow: hidden;
  min-width: 150px;
  height: 30px;
  padding: 4px;
  margin: 5px;
  font-family:helvetica;
  font-size: 25px;
  text-align: center;
  cursor:pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor:default;
}
.blue{
  background: #0774d9;
}
.red{
  background: red;
}
.green{
  background: #3cff00;
}

JavaScript

var botones = document.querySelectorAll('.boton');
for(var i = 0; i < botones.length ;i++){
  var boton = botones[i];
	boton.onclick = function(e){
	var color = document.querySelector('input');
	var circle = document.createElement('div');
  circle.className = 'c';
  circle.style.top = e.clientY - this.offsetTop + 'px';
  circle.style.left = e.clientX - this.offsetLeft + 'px';
  this.appendChild(circle);
  setTimeout(function(){
  		circle.style.transform = 'scale(500)';
      circle.style.opacity = 0;
    }, 10);
    setTimeout(function(){
      circle.remove();
    }, 2000);
	}
}