<div id="container">
<div class="button" id="white-button">tap me</div>
<div class="button" id="pink-button">tap me</div>
</div>
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;
}
}
View Compiled
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);
}
This Pen doesn't use any external JavaScript resources.