gamma logo

1

Pixel Button

PreviousNext

A pixelated button animation effect built with Tailwind CSS and React.

Installation

pnpm dlx shadcn@latest add @gammaui/pixel-button

Usage

import { PixelButton } from "@/components/gammaui/pixel-button"
 
export default function Example() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900">
      <PixelButton color="#4f46e5">Click Me</PixelButton>
    </div>
  )
}

The PixelButton dynamically creates a grid of pixel-like elements that fade in when hovered, creating a retro-styled button effect.

Props

PropTypeDefaultDescription
childrenReact.ReactNode—The content (text or elements) inside the button.
colorstring'#ff5722'The main color used for the pixel background animation.

Example Variants

Custom Colors

<PixelButton color="#22c55e">Success</PixelButton>
<PixelButton color="#3b82f6">Primary</PixelButton>
<PixelButton color="#ef4444">Danger</PixelButton>

Inside a Grid

<div className="grid grid-cols-3 gap-4">
  <PixelButton color="#f97316">Play</PixelButton>
  <PixelButton color="#10b981">Save</PixelButton>
  <PixelButton color="#6366f1">Next</PixelButton>
</div>

Features

  • Dynamic Pixel Generation: Automatically generates a grid of pixel divs based on button size.
  • Smooth Transitions: Each pixel fades in with randomized delay for organic motion.
  • Fully Responsive: Adjusts to any button size dynamically.
  • Customizable Colors: Change the pixel color with the color prop.
  • Tailwind v4 Ready: Uses modern Tailwind CSS classes.

Tips

  • Use consistent pixel sizes (default 10px) for smooth patterns.
  • Adjust button size using Tailwind utilities (e.g., w-[180px] h-[60px]).
  • To create multiple color variations, wrap buttons in themed containers.
  • You can increase pixel density by reducing the pixel size in the code logic.