Pixel Fill Button
An interactive button whose background fills with square matrix pixels radiating from the cursor entry point on hover.
11.4 KB
•Updated on September 20, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-pixel-fill-buttonUsage
Code
import { PixelFillButton } from '@/components/spaceui/pixel-fill-button'
export default function Example() {
return (
<div className="flex gap-4">
{/* Classic */}
<PixelFillButton pixelColor="#ffe9a8">Classic Button</PixelFillButton>
{/* Silk Border */}
<PixelFillButton borderEffect="silk" silkPreset="twilight" pixelColor="#ec4899">
Silk Edition
</PixelFillButton>
{/* Metal Border */}
<PixelFillButton borderEffect="metal" metalPreset="chrome" pixelColor="#ffffff">
Metal Edition
</PixelFillButton>
</div>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Button label / icons |
borderEffect | default|silk|metal|none | default | Active border styling wrapper (Silk shader or Liquid Metal) |
silkPreset | SilkPreset | twilight | Preset palette for the Silk Border ('aurora', 'sunset', etc.) |
metalPreset | LiquidPreset | chrome | Preset finish for the Metal Border ('gold', 'violet', etc.) |
pixelColor | string | #ffe9a8 | Color of the expanding matrix pixels |
textColorOnHover | string | #000000 | Color applied to the text when pixel-filled |
pixelSize | number | 4 | Size in pixels of each square grain |
blurAmount | string | 8px | Text transition blur amount |
squircle | boolean | true | Smooth squircle curvature styling |
href | string | — | Optional URL (renders an <a> tag when provided) |
borderClassName | string | — | Custom class names for the outer border container |
className | string | — | Custom class names for the button element |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
Related Components
Button SquircleButton
Tactile squircle button and badge components featuring dynamic curvature morphing on hover from the original portfolio design.
ViewGlass ButtonButton
A glassmorphic button built on top of Button Squircle — backdrop blur, layered inset highlights and a hover shine sweep.
ViewSlide To ConfirmButton
Tactile slide-to-action control with spring physics and inertia confirmation.
View