Animated Ghost Button — блик при наведении на кнопку

by Denis Tverdokhlebov

HTML

<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>

<div class="center-wrap">
	<div class="button">
		<a href="#">Often Unseen <span class="shift">›</span></a>
		<div class="mask"></div>
	</div>
</div>

CSS

html, body {
	height: 100%;
}

body {
	background: linear-gradient(#000 0%, #121212 100%);
}

.center-wrap {
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 125px);
	width: 250px;
	height: 200px;
}

.button {
	position: relative;
	display: block;
	background: none center center no-repeat;
	background-size: cover;
	border: 2px solid #2e2e2e;
	text-transform: uppercase;
	letter-spacing: .3rem;
	padding: 20px 15px;
	text-align: center;
	max-width: 270px;
	min-width: 200px;
	cursor: pointer;
	overflow: hidden;
	-webkit-transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1);
	transition: border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1);
}

.button a {
	color: #969696;
	font-family: 'Varela Round';
	text-decoration: none;
}

.button .mask {
	background: #fff;
	background: rgba(255,255,255,0.5);
}

.button .mask {
	position: absolute;
	display: block;
	width: 200px;
	height: 100px;
	-webkit-transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
	transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
	-webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
	transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}

.button .shift {
	-webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
	transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}

.button:hover {
	border-color: #fff;
	/* box-shadow: 0 0 5px rgba(255,245,245,0.8); */
	/* background-image: url('http://cuinine.com/img/codepen/savvy.jpg'); */
}

.button:hover a {
	color: #fff;
}

.button:hover .mask {
	background: #fff;
	-webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
	transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}

.button:hover .shift {
	padding-left: 5px;
}