Buttons

Skewed wipe swap button

A button that swaps its label on hover or focus while a sheared accent panel wipes up across its face.

Hover either button, or Tab to it, to run the wipe.

Using Skewed wipe swap button

A button that swaps its label on hover or focus while a sheared accent panel wipes up across its face.

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: restLabel, hoverLabel, accent, skew, speed

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 code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2531Skewed wipe reveal buttonButtonsA pill hidden under a slanted dark panel; hovering slides the panel off the right edge to uncover the bright fill while the label flips to dark.

2618Skewed blade invertButtonsA dark rounded button that inverts as a slanted accent blade opens outward from its center on hover or keyboard focus.

1887Skewed wipe buttonButtonsA button masked by a slanted dark panel that slides off to the right on hover, uncovering the colour underneath.

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.

1848Center out fill buttonButtonsAn outlined uppercase button whose accent fill opens from a hairline at the center out to both edges on hover or focus.