Buttons

Rising arrow link button

A read more button where the label slides sideways to open a gap and an arrow climbs into it from below the clipped bottom edge.

Using Rising arrow link button

A read more button where the label slides sideways to open a gap and an arrow climbs into it from below the clipped bottom edge.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: label, accent, duration, radius, labelShift

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2622Disc to Pill CTAButtonsA small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along.

2513Slide under download buttonButtonsA labelled button that slides a bright action tray out from under its plate on hover or focus, with a bobbing download arrow inside the tray.

2704Sliding send buttonButtonsA flat send button that slides right on hover while the gap between its label and arrow opens, recoils a few pixels under press, and settles back on leave.

2601Arrow relay badge pillButtonsA pill button with a round left badge whose arrow exits through the top corner on hover while a fresh one arrives from below and the body eases to near-black.

2683Arrow wipe buttonButtonsA pill button whose accent plate, cut into an arrowhead, sweeps in from the left on hover and inverts the label letter by letter as its point crosses.

1629Arrow wipe call to actionButtonsA call to action whose darker plate wipes in from the left on hover while a tucked arrow slides out to meet the label, and pushes down a pixel when clicked.