<div class="button-3d">
	<button>
		<label>
			<span class="icon">
				<span class="line-1">—</span>
				<span class="line-2">—</span>
			</span>
			<span class="text" data-content="Back">Back</span>
		</label>
	</button>
</div>

$ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);

body {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	min-height: 100vh;
	perspective: 500px;
}

.button-3d {
	transform-style: preserve-3d;
	transform: translateY(0);
	transition: transform 0.3s $ease-bounce;

	button {
		position: relative;
		width: 20vw;
		height: 10vw;
		border-radius: 1.5vw;
		border: none;
		transform-style: preserve-3d;
		transform: rotateX(45deg) rotateY(15deg) rotateZ(-30deg);
		font-size: 3.5vw;
		color: DodgerBlue;
		animation: spin 5s ease-in-out alternate infinite;
	}
	
	label {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 20vw;
		height: 10vw;
		text-shadow: 0px 0px 0.4vw rgba(255,255,255,1);
		transform-style: preserve-3d;
		transform: translateZ(0.5vw);
		transition: transform 0.3s $ease-bounce;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 20vw;
			height: 10vw;
			border-radius: 1.5vw;
			box-shadow: 0 3vw 1.5vw 0 rgba(0,0,0,0.03);
			opacity: 0;
			transition: opacity 0.3s;
			transform: translateZ(-0.5vw);
			transition: opacity 0.3s $ease-bounce, transform 0.3s $ease-bounce, filter 0.3s $ease-bounce;
		}

		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 20vw;
			height: 10vw;
			border-radius: 1.5vw;
			background: linear-gradient(to right, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 100%);
			opacity: 0;
			transition: opacity 0.3s;
		}
	}

	.icon {
		position: absolute;
		top: calc(50% - 2vw);
		left: 3vw;
		display: inline-block;
		width: 3vw;
		height: 3vw;
	}

	.line-1,
	.line-2 {
		position: absolute;
		left: 0;
		z-index: 1;
		display: block;
		transform-origin: left center;
		transform-style: preserve-3d;

		&:before {
			content: '—';
			position: absolute;
			z-index: -1;
			left: 0;
			display: block;
			transform-origin: left center;
			color: transparent;
			transform: translateZ(-0.5vw);
			filter: blur(0vw);
			transition: color 0.3s $ease-bounce, transform 0.3s $ease-bounce, filter 0.3s $ease-bounce;
		}
	}

	.line-1 {
		top: -0.25vw;
		left: 0.25vw;
		transform: rotate(35deg);
	}

	.line-2 {
		top: 0.25vw;
		transform: rotate(-35deg);
	}

	.text {
		position: relative;
		z-index: 1;
		display: inline-block;
		padding-left: 3vw;
		transform-style: preserve-3d;

		&:before {
			content: attr(data-content);
			position: absolute;
			z-index: -1;
			left: 3vw;
			display: block;
			transform-origin: left center;
			color: transparent;
			transform: translateZ(-0.5vw);
			filter: blur(0vw);
			transition: color 0.3s $ease-bounce, transform 0.3s $ease-bounce, filter 0.3s $ease-bounce;
		}
	}

	&:hover {
		transform: translateY(-3vw);

		label {
			transform: translateZ(3vw);

			&:before {
				opacity: 1;
				transform: translateZ(-3vw);
			}

			&:after {
				opacity: 1;
			}
		}

		.line-1,
		.line-2 {
			&:before {
				color: rgba(0,0,0,0.4);
				transform: translateZ(-3vw);
				filter: blur(0.3vw);
			}
		}

		.text:before {
			color: rgba(0,0,0,0.4);
			transform: translateZ(-3vw);
			filter: blur(0.3vw);
		}
	}
	
}

@keyframes spin {
	from {
		transform: rotateX(45deg) rotateY(15deg) rotateZ(-30deg);
	}
	to {
		transform: rotateX(55deg) rotateY(-15deg) rotateZ(30deg);
	}
}