Cut Corners Buttons
Buttons with angled, clipped corners for a sharp geometric look. Fits gaming, tech, or editorial interfaces that want an edgy call to action.
Buttons with angled, clipped corners for a sharp geometric look. Fits gaming, tech, or editorial interfaces that want an edgy call to action.
Search blocks by description or jump to a page.
Cut Corners Buttons shows five button variants arranged in a single centered, wrapping row: Default, Secondary, Destructive, Outline, and Ghost. Each button has its top left and bottom right corners sliced off at an angle, giving it a sharp parallelogram silhouette. On hover the clipped corners expand back out to full rectangles, so the shape transitions smoothly from geometric to standard without any fill or color change.
All five variants share the same clip and transition, so the set reads as a unified family. The label text, the number of variants you include, and the order you arrange them are all straightforward to adjust. You can drop in one variant where a single call to action is needed, or keep the full row as a reference palette.
This set fits an AI assistant product where clean, angular styling signals precision without feeling cold. The cut corner shape adds visual character to a landing page or onboarding flow that would otherwise rely on plain rounded buttons. It works better than a standard button row when the surrounding interface already leans into geometric shapes, because the hover transition reinforces that motion language rather than fighting it.
A natural flow around it on a Components page:
Before
After
Each button is a standalone component, so you can pick exactly the variants your interface needs. Three common approaches:
Tip: the hover transition looks sharpest when the button sits against a flat background with generous space around it, so the corner expansion has room to read clearly.