<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.