<a href="#!" class="btn">
	<i class="material-icons">arrow_forward</i>
</a>

$grey: #292827;

*, *:before, *:after {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	background: $grey;
	display: flex;
	align-items: center;
	justify-content: center;
}

a {
	text-decoration: none;
	color: #fff;
	
	&.btn {
		border: 1px solid #fff;
		width: 60px;
		text-align: center;
		position: relative;
		overflow: hidden;
		z-index: 0;
		transition: all 200ms cubic-bezier(.25,.75,.5,1);
		
		& i {
			line-height: 60px;
		}
		
		&:after {
			content: '';
			position: absolute;
			transition: all 250ms cubic-bezier(.25,.75,.5,1.25);
			width: 0;
			right: 0%;
			bottom: 0;
			height: 100%;
			background: #fff;
			z-index: -1;
		}
		
		&:hover, &.hover {
			color: $grey;
			
			&:after {
				width: 100%;
    		right: auto;
    		left: 0;
			}
		}
	}
}

$(document).ready(function() {
	
	$('.btn').delay(400).queue(function(next) {
		$(this).addClass('hover').delay(1800).queue(function(next) {
			$(this).removeClass('hover');
		});
		next();
	});
});