Arrow Link
A 'Read more' link whose arrow slides right on hover. The lightest possible affordance for a text link that leads somewhere.
Also known as: read more arrow, arrow nudge hover.
HTML
<a class="hfx-link-arrow" href="#">Read more <span aria-hidden="true">→</span></a>
CSS
.hfx-link-arrow {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
display: inline-block;
color: var(--c);
font: 600 1em system-ui, sans-serif;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35em;}
.hfx-link-arrow span {
transition: transform 0.25s ease;
}
.hfx-link-arrow:hover span { transform: translateX(0.3em); }
@media (prefers-reduced-motion: reduce) {
.hfx-link-arrow, .hfx-link-arrow *, .hfx-link-arrow::before, .hfx-link-arrow::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<a href="#" class="group inline-flex items-center gap-1 font-semibold text-blue-500"> Read more <span class="transition-transform duration-200 group-hover:translate-x-1">→</span> </a>
Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.