Pixel Fire Button

A CTA button that fills with molten pixel fire: a doom-fire simulation on a 3px canvas floods the face from the bottom, the flames bend toward your cursor on hover, and a press sends a burst through them. Lit and unlit states, a ghost variant, and an overlay slot for spinners or success icons. Inspired by the fire CTA on the Forge landing page by ui8.ai (ui8.ai/forge), rebuilt from scratch.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pixel Fire Button to your project and fits it to your theme.

"use client"

import { PixelFireButton } from "@/components/ui/pixel-fire-button"

export default function PixelFireButtonDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-[#161310] p-10">
      <div className="flex flex-wrap items-center justify-center gap-4">
        <PixelFireButton>Get early access</PixelFireButton>
        <PixelFireButton variant="ghost">Read the docs</PixelFireButton>
      </div>
    </div>
  )
}