Lollipop Button Animation

HTML

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<!-- button 1 -->
    <div class="button" id="button_1">
        <span>CLICK ME!</span>
    </div>
    <div class="button" id="button_2">
        <span>CLICK ME!</span>
    </div>
    <div class="button" id="button_3">
        <span>CLICK ME!</span>
    </div>

CSS

/*---------------------- reset ------------------------------------------------------------------------------------------------------------*/
*{
	padding:0px;
	margin:0px;
	outline:none;
	text-decoration:none;
}
body{
	font-family:'Roboto';
	padding-top:100px;
}
/*---------------------- sections ---------------------------------------------------------------------------------------------------------*/
.sections{
	position:relative;
	width:89%;
	padding:1%;
	margin:0 auto;
	border-bottom:solid 1px #3A3A3A;
}
.sections:last-child{
	border-bottom:none;
}
/*---------------------- buttons ----------------------------------------------------------------------------------------------------------*/
.button{
	position:relative;
  margin: 1em;
	width:160px;
	height:40px;
	margin:0 auto;
	border-radius:2px;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
	font-size:16px;
	line-height:40px;
	text-align:center;
	color:#FFF;
	font-weight:400;
	cursor:pointer;
	overflow:hidden;
	z-index:1;
}
.button:hover{
	-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18);
	box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18);
}
.button span{
	position:relative;
	display:block;
	z-index:10;
}
/*---------------------- button_1 ---------------------------------------------------------------------------------------------------------*/
#button_1{
	background:#26A69A;
}
#button_1:hover{
	background:#4DB6AC;
}
#button_1 #animate{
	position:absolute;
	background:#80CBC4;
	border-radius:50%;
	width:30px;
	height:30px;
	z-index:5;
    animation-name: button_1;
    animation-duration: 1s;
}
@keyframes button_1 {
    0%   {background-color: #80CBC4;}
    100% {background-color: #4DB6AC;}
}
/*---------------------- button_2 ---------------------------------------------------------------------------------------------------------*/
#button_2{
	background:#424242;
}
#button_2:hover{
	background:#616161;
}
#button_2...

JavaScript

$(document).ready(function(e) {
	$(".button").click(function(e) {
		//initial
		var button		= $(this);
		var diameter	= 400;
		var offset		= $(this).offset();
		var relativeX 	= (e.pageX - offset.left);
		var relativeY 	= (e.pageY - offset.top);
		
		//positions during animation
		var startPosX 	= relativeX;
		var startPosY 	= relativeY;
		
		var endPosX 	= relativeX-(diameter/2);
		var endPosY 	= relativeY-(diameter/2);
		
		//animate
		button.append("<div id='animate'></div>");
		button.find("#animate").css({
								"left":	startPosX,
								"top":	startPosY,
							}).animate({
								width:	diameter,
								height:	diameter,
								left:	endPosX,
								top:	endPosY
							},500,function(){
								button.find("#animate").remove();
							});
    });
});