body {
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Bricolage Grotesque", sans-serif;
}
$ease: cubic-bezier(0.72, -0.59, 0.16, 1.53);
ul {
position: relative;
z-index: 0;
}
:root {
--color: #ff4755;
}
button {
width: 180px;
height: 90px;
background: var(--color);
border: none;
color: #fff;
font-size: 24px;
line-height: 80px;
text-align: center;
transform-origin: left center;
position: absolute;
cursor: pointer;
transition: 0.4s $ease;
border-radius: 8px;
&:focus {
outline: 1px auto var(--color);
outline-offset: 5px;
}
}
#hello {
transform: scale(0.7) perspective(102px) rotateY(-3deg);
filter: blur(2px) brightness(1.5);
left: -120px;
z-index: 3;
&.active {
transform: perspective(102px) rotateY(3deg);
left: -150px;
filter: blur(0) brightness(1);
z-index: 2;
}
}
#world {
transform: scale(0.7) perspective(102px) rotateY(3deg);
filter: blur(2px) brightness(1.5);
z-index: 1;
&.active {
transform: scale(1) perspective(102px) rotateY(-3deg);
filter: blur(0) brightness(1);
z-index: 4;
}
}
View Compiled
const hello = document.getElementById("hello");
const world = document.getElementById("world");
hello.addEventListener('click', function (e) {
const classList = hello.classList;
if(!classList.contains('active')) {
classList.add('active')
world.classList.remove('active')
}
})
world.addEventListener('click', function (e) {
const classList = world.classList;
if(!classList.contains('active')) {
classList.add('active')
hello.classList.remove('active')
}
})