Arrow
Animated CTA chevron — pure CSS, one class, inherits color and font-size.
A small CTA arrow drawn entirely in CSS — no SVG, no mask-image, no clip-path. At rest it shows a chevron ›; on parent :hover or :focus-visible the chevron slides 0.25em right and a shaft line wipes in beneath it.
Color follows currentColor. Size follows parent font-size (always 1em × 1em). Mirrors automatically inside dir="rtl". Respects prefers-reduced-motion.
Install
import "elements-kit/ui/arrow/arrow.css";API
<a href="/contact">
Schedule a demo
<span class="x-arrow" aria-hidden="true"></span>
</a>| Property | Source | Notes |
|---|---|---|
| color | currentColor (inherits parent color) | match text or accent |
| size | 1em × 1em (inherits parent font-size) | scale by changing parent font size |
| direction | :dir(rtl) ancestor | mirrors via --arrow-direction: -1 |
| animation trigger | parent :hover, :focus-visible | wraps in any focusable element |
There are no data-* attributes — the arrow is intentionally one shape, one size class, one color contract. Variants come from the surrounding element.
How the shape is drawn
- Chevron
::before— a0.5em × 0.5emsquare with onlyborder-topandborder-right; rotated 45° so the two strokes meet at the right tip. - Shaft line
::after— a flat0.578em × 1.5pxrounded rectangle, hidden by default viatransform: scaleX(0)withtransform-origin: left center. Hover scales it to1, producing a left-to-right draw. - Slide — parent
:hover/:focus-visibleaddstranslateX(0.25em)to the element's own transform. A CSS variable--arrow-direction(1 or -1) multiplies the translation so RTL flows naturally without a second rule.
Recipes
Inside a primary CTA
<a class="x-button" data-variant="solid" href="https://www.quba.co">
Get started
<span class="x-arrow" aria-hidden="true"></span>
</a>Inside a text link
<a href="/blog/data-protection-uae" style="color: var(--accent-11)">
Read the guide
<span class="x-arrow" aria-hidden="true"></span>
</a>In RTL
<div dir="rtl">
<a href="/ar/contact">
اطلب عرضًا
<span class="x-arrow" aria-hidden="true"></span>
</a>
</div>Accessibility
- The arrow is decorative; always include
aria-hidden="true"so screen readers don't announce it. - Don't wrap the arrow's animation around essential UI — it activates on
:hoverand:focus-visibleof the parent, so a focusable parent is required for the animation to reach keyboard users. prefers-reduced-motion: reduceremoves the transitions but preserves the end state, so users who disable motion still see the hovered/focused state, just instantly.