ul 
	button#hello.active Hello
	button#world World
View Compiled
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')
	}
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js