Buttons

Slanted outline button

A hollow parallelogram button whose outline arrives in two stages: the slanted sides swing into their lean first, then the flat top and bottom draw in to close the shape.

Using Slanted outline button

A hollow parallelogram button whose outline arrives in two stages: the slanted sides swing into their lean first, then the flat top and bottom draw in to close the shape.

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: accent, label, slant, lineWidth, glow

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

2598Clamp jaws glow buttonButtonsA hollow outlined button whose side tick marks slide in, merge into jaws, and close over the label with an accent glow on hover or focus.

2644Corner bracket seal buttonButtonsTwo short corner brackets grow along the edges until they seal into a complete frame around the label on hover.

1869Light sweep buttonButtonsA lit outline button whose glowing edge sends a narrow band of light sweeping across it on hover.

1872Outline invert buttonButtonsA dark slate button ringed in a warm outline that trades every color with its border on hover and lifts on a shifting glow.

2709Border trace buttonButtonsA quiet translucent button whose four edges draw themselves in sequence on hover while a soft band of light crosses the face.

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.