<div class="card">
<!-- 	<h1>Tout Block</h1>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum culpa quaerat ut harum aspernatur laboriosam esse eos voluptate iste unde. Ipsa nihil, voluptatem quos voluptatum voluptates velit nemo dolores explicabo.</p> -->
	<a href="#">Animated Arrow Link<span></span></a>
</div>
body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	padding: 4em;
	background: #2C292E;
	font-family: 'Nunito', sans-serif;
}

div {
	max-width: 640px;
}

h1 {
	color: #ccc;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}

p {
	color: #fefefe;
	font-size: 2em;
}

a {
	position: relative;
	color: #50DF8F;
	text-decoration: none;
	font-size: 2em;
}

a:before,
a:after {
	content: '';
	display: block;
	position: absolute;
	height: 2px;
	top: 50%;
	background: #50DF8F;
	border-radius: 4px;
	transition: all 0.3s;
}

a:before {
	width: 148px;
	right: 110%;
}
a:after {
	width: 0%;
	left: 110%;
}

a:hover:before {
	width: 0%;
}
a:hover:after {
	width: 60px;
}

a span {
	position: absolute;
	display: block;
	width: 60px;
	height: 100%;
	right: -30%;
	top: 0;
}

a span:before,
a span:after {
	content:'';
	display: block;
	position: absolute;
	width: 0;
	height: 2px;
	top: 0;
	right: 0;
	background: #50DF8F;
	border-radius: 4px;
	transform: rotate(45deg);
	transition: all 0.15s;
	transition-delay: 0.25s;
	opacity: 0;
}
a span:before {
	top: 30px;
	right: 0;
	transform: rotate(45deg);
}
a span:after {
	top: 14px;
	right: 0;
	transform: rotate(-45deg);
}

a:hover span:before {
	width: 24px;
	top: 14px;
	right: -4px;
	opacity: 1;
}

a:hover span:after {
	width: 24px;
	top: 30px;
	right: -4px;
	opacity: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.