Recently I created a pointing arrow animation on a button for a client. When Initially seeing the video demonstrating the animation, I knew straight away it involved opacity, transform and a cheeky bit of simple transitioning. As always I vouch for 'less is more' and even thought of using an animating background. Thus, mitigating the need to use a <span> and <svg> element. However, animating opacity in the background can be tricky, so for now I've stuck with the classic absolute positioning and transitioning of the <svg> arrow.
<a class="arrow-fade" href="#">
<span>Hover me</span>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
</a>.pointing-arrow {
position: relative;
padding: 1rem 2rem;
background-color: #357edd;
color: #fff;
text-decoration: none;
border-radius: 30px;
font-size: 1.2rem;
}
.pointing-arrow span {
display: inline-block;
transition: transform 0.3s ease;
}
.pointing-arrow svg {
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-100%);
width: 15px;
opacity: 0;
transition: all 0.4s ease;
}
.pointing-arrow:hover span {
transform: translateX(-10px);
}
.pointing-arrow:hover svg {
opacity: 1;
transform: translateY(-50%) translateX(0%);
}