body, html {
	width: 100%;
	min-height: 100%;
	background: #FF7171;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

#container {
	display: flex;
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
}


.button {
	width: 150px;
	height: 50px;
	position: relative;
	border-radius: 40px;
	text-align: center;
	line-height: 52px;
	font-size: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	overflow: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.ripple {
	width: 50px;
	height: 50px;
	position: absolute;
	border-radius: 50%;
	
	animation: ripple 500ms;
}

#white-button {
	background: #FFF;
	color: #405167;
}

#pink-button {
	background: #FF7171;
	color: #FFF;
}

.button.clicked {
	animation: button-out 600ms ease-in forwards;
}

.button.spawned {
	animation: button-in 600ms ease-in forwards;
}

@keyframes button-out {
	30% {
		transform: scale(1.2);
	}
	
	100% {
		transform: scale(0);
	}
}

@keyframes button-in {
	0% {
		transform: scale(10);
	}
	
	80% {
		transform: scale(0.8);
	}
	
	100% {
		transform: scale(1);
	}
}

@keyframes ripple {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
	
    100% {
      transform: scale(15);
      opacity: 0.1;
    }
}

var parent = document.getElementById('container');
var whiteButton = document.getElementById('white-button');
var pinkButton = document.getElementById('pink-button');

pinkButton.style.display = 'none';

whiteButton.addEventListener('click', function(e) {
	var _this = this;
	
	makeRipple(whiteButton, e.clientX - _this.offsetLeft, e.clientY - _this.offsetTop, '#FF7171');
	
	_this.classList.add('clicked');
	
	setTimeout(function() {
		_this.style.display = 'none';
		_this.classList.remove('clicked');
		
		pinkButton.style.display = 'block';
		pinkButton.classList.add('spawned');
		
		document.body.style.background = '#FFFFFF';
		
		_this.classList.remove('clicked');
		
		setTimeout(function() {
			pinkButton.classList.remove('spawned');
		}, 600);
	}, 600);
});

pinkButton.addEventListener('click', function(e) {
	var _this = this;
	
	makeRipple(pinkButton, e.clientX - _this.offsetLeft, e.clientY - _this.offsetTop, '#FFF');
	
	_this.classList.add('clicked');
	
	setTimeout(function() {
		_this.style.display = 'none';
		_this.classList.remove('clicked');
		
		whiteButton.style.display = 'block';
		whiteButton.classList.add('spawned');
		
		document.body.style.background = '#FF7171';
		
		_this.classList.remove('clicked');
		
		setTimeout(function() {
			whiteButton.classList.remove('spawned');
		}, 600);
	}, 600);
});

function makeRipple(el, x, y, color) {
	var ripple = document.createElement('div');
	ripple.classList.add('ripple');
	ripple.style.left = (x - 25) + 'px';
	ripple.style.top = (y - 25) + 'px';
	ripple.style.background = color;
	el.appendChild(ripple);
	
	setTimeout(function(){
		el.removeChild(ripple);
	}, 500);
}