h4.title
	| Make awesome things 
	span.title__hidden that matters !!!

body {
	background: linear-gradient(-45deg, #23074d, #cc5333);
	display: flex;
	height: 100vh;
}

.title {
	$self: &;
	display: inline-block;
	margin: auto;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
	width: 300px;
	border: 1px solid white;
	border-radius: 999px;
	padding: 15px 30px;
	transition:
		background .8s .4s ease,
		color .8s ease,
		border-width .3s cubic-bezier(.16,1.05,1,1),
		box-shadow 1s .4s ease,
		width .8s ease;
	
	&__hidden {
		font-weight: thin;
		display: inline-block;
		opacity: 0;
		transition:
			transform .2s .3s cubic-bezier(.16,1.05,1,1),
			opacity .5s ease,
			drop-shadow .5s .5s ease;
		transform: translateX(400px);
	}
	
	&:hover {
		width: 500px;
		border: 8px solid white;
		background: linear-gradient(to left, #12c2e9, #c471ed, #f64f59);
		-webkit-text-fill-color: transparent;
 		-webkit-background-clip: text;
		box-shadow: 0 0 10px #fff, 0 0 12px #fff;
		
		#{$self}__hidden {
			-webkit-text-fill-color: #fff;
			transform: translateX(0);
			opacity: 1;
			filter: drop-shadow(0 0 10px #fff);
		}
	}
}