Pixel Buttons
Buttons with a blocky pixel art finish and retro styling. Perfect for games, indie projects, and brands that lean on a nostalgic visual theme.
Buttons with a blocky pixel art finish and retro styling. Perfect for games, indie projects, and brands that lean on a nostalgic visual theme.
Search blocks by description or jump to a page.
Pixel Buttons is a flat row of five button variants arranged in a centered, wrapping flex layout. Each button carries a solid two pixel border and a hard offset shadow that sits four pixels down and to the right, giving every button the raised, blocky look of retro pixel art. On hover the button shifts two pixels toward the shadow, halving it; on press it travels the full four pixels and the shadow disappears completely, mimicking a physical key being pushed down.
All five standard variants are present: Default, Secondary,
Destructive, Outline, and Ghost. The shadow color follows
currentColor on each variant, so the effect reads correctly against
any fill. You can use as few or as many of the variants as your
interface needs and swap the label text freely without affecting the
motion behavior.
Reach for this block when your product wants a deliberate retro or arcade personality on its action buttons. A fintech or banking product that leans on a bold, graphic visual identity can use these buttons to make transaction confirms, fund transfers, and account actions feel distinct and memorable rather than generic. They work well anywhere a filled button row is used to preview interactive states, such as a design system showcase or a component reference page.
A natural flow around it on a Components page:
Before
After
Drop in any of the five variants that match your use case, then replace the labels with your own action copy:
Tip: the press animation works best when the button is on a light background where the offset shadow has enough contrast to read clearly.