PixelButton Component: Neon Arcade Button for React

PixelButton wraps a native <button> element inside Framer Motion’s motion.button to deliver tactile scale animations on hover and press. It applies a pixel-art border treatment via the pixel-border utility class and exposes four named colour variants that map to the developer.exe neon colour palette. All standard HTML button attributes — including type, disabled, onClick, aria-*, and form — are forwarded directly to the underlying element through prop spreading.

Props

variant

"primary" | "secondary" | "danger" | "ghost"

default:"primary"

Controls the colour scheme and glow style of the button. Each variant maps to a distinct neon palette entry — see the Variant styles table below.

children

ReactNode

required

The button label content. Rendered inside the motion.button element. Plain strings are most common; icons and short JSX are also supported.

className

string

default:"\"\""

Additional Tailwind utility classes appended after the built-in base and variant classes. Use this to override width, margin, or flex alignment without touching the component source.

...rest

React.ButtonHTMLAttributes<HTMLButtonElement>

All standard HTML button attributes (type, disabled, onClick, form, aria-label, etc.) are forwarded to the underlying motion.button element via spread.

Variants

Primary
Secondary
Danger
Ghost

The default variant. Magenta background with a magenta glow, transitions to cyan on hover.

<PixelButton variant="primary">INSERT COIN</PixelButton>

Navy background with a cyan text and a subtle cyan glow, transitions to a filled cyan block on hover.

<PixelButton variant="secondary">PLAYER 2</PixelButton>

Black background with a neon-green border and text, inverts to a green fill on hover.

<PixelButton variant="danger">GAME OVER</PixelButton>

Fully transparent background with neon-yellow text, adds a semi-transparent yellow tint on hover.

<PixelButton variant="ghost">SKIP LEVEL</PixelButton>

Variant styles

Variant	Resting background	Text colour	Hover background	Glow colour
`primary`	`#ff2bd6` (neon-magenta)	white	`#22d3ee` (neon-cyan)	`rgba(255,43,214,0.5)`
`secondary`	`#0f1b36` (arcade-navy)	`#22d3ee` (neon-cyan)	`#22d3ee` (neon-cyan)	`rgba(34,211,238,0.3)`
`danger`	`#06070d` (arcade-black)	`#39ff14` (neon-green)	`#39ff14` (neon-green)	— (border only)
`ghost`	transparent	`#fde047` (neon-yellow)	`rgba(253,224,71,0.2)`	—

Animation behaviour

PixelButton uses Framer Motion’s whileHover and whileTap gesture props on the underlying motion.button:

whileHover={{ scale: 1.05 }} — the button scales up 5% when the pointer enters, giving a satisfying “press ready” affordance.
whileTap={{ scale: 0.95 }} — the button scales down 5% while the pointer button is held, simulating physical depression.

Both transitions are handled by Framer Motion’s spring physics engine, so no custom transition config is required. Colour changes between resting and hover states are governed by the Tailwind transition-colors duration-200 classes applied to every button.

The pixel-border class applies a multi-layered box-shadow to simulate a chunky pixel-art button border. Its exact definition lives in the global stylesheet — see the Color System docs for the full token reference.

Form submission example

Because all HTML button attributes are forwarded, PixelButton works as a drop-in submit control inside any <form>:

<PixelButton
  type="submit"
  className="w-full flex justify-center items-center gap-3"
>
  SUBMIT SCORE
</PixelButton>

UI Components

PixelButton Component: Neon Arcade Button for React

Props

Variants

Variant styles

Animation behaviour

Form submission example

Build docs developers (and LLMs) love

UI Components

Documentation Index

​Props

​Variants

​Variant styles

​Animation behaviour

​Form submission example

Build docs developers (and LLMs) love

Props

Variants

Variant styles

Animation behaviour

Form submission example