$(document).ready(function() {
	$(function() {
		$('.ripple').on('click', function (event) {
			event.preventDefault();
			var thisheight = $(this).height();
			var $div = $('<div/>'),
			btnOffset = $(this).offset(),
			xPos = event.pageX - btnOffset.left,
			yPos = event.pageY - btnOffset.top;
			$div.addClass('ripple-effect');
			var $ripple = $(".ripple-effect");
			$ripple.css("height", thisheight);
			$ripple.css("width", thisheight);
			$div
			.css({
				top: yPos - ($ripple.height()/2),
				left: xPos - ($ripple.width()/2),
				background: $(this).data("ripple-color")
			})
			.appendTo($(this));
			window.setTimeout(function(){
				$div.remove();
			}, 2000);
		});
	});
});