Pixel Grid Button

A tactile cobalt blue button featuring a high-density matrix of geometric pixels that react to clicks with an outward opacity wave and localized depth depression.

Preview

Interactive Wave & Depth Effect

Click anywhere on the button: the pixels right under your cursor sink with physical depth, and an energized wave of opacity and radiant white-cyan illumination radiates outward through the matrix before gently dissipating.

Pixel Shapes

Choose from geometric square pixels, digital LED circles, soft rounded cells, or sharp diamonds using the pixelShape prop:

Pixel Density

Adjust the pixel cell dimension with the pixelSize prop (e.g. 5, 8, 11):

Size Variations

Installation

import { PixelGridButton } from "@/components/buttons";

export default function Example() {
  return (
    <PixelGridButton pixelSize={5} pixelShape="square">
      Deploy Now
    </PixelGridButton>
  );
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	`"Deploy Now"`	Button text or content.
`pixelShape`	`"square" \| "circle" \| "rounded" \| "diamond"`	`"square"`	Shape geometry of each pixel cell.
`pixelSize`	`number`	`8`	Dimension in pixels of each grid cell.
`waveRadius`	`number`	`75`	Maximum outward propagation radius of the click opacity wave.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button height and typography sizing.
`className`	`string`	`""`	Additional Tailwind CSS classes.
`...props`	`React.ButtonHTMLAttributes<HTMLButtonElement>`	—	Standard native HTML button attributes.