# Pixel Broke Button

> Cyberpunk button cut into broken pixel blocks with clip-path and a periodic glitch shift.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/pixel-broke-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/pixel-broke-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/pixel-broke-button-demo.tsx"
import { PixelBrokeButton } from "@/components/pixel-broke-button"

export default function PixelBrokeButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 rounded-2xl bg-zinc-900 p-10">
      <PixelBrokeButton>Hack in</PixelBrokeButton>
      <PixelBrokeButton color="#f472b6">Overload</PixelBrokeButton>
      <PixelBrokeButton color="#a3e635">Jack out</PixelBrokeButton>
    </div>
  )
}
```

## Source

```tsx title="components/pixel-broke-button.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const css = `@keyframes pixel-broke-glitch{0%,86%,100%{transform:translate(0,0);opacity:0}88%{transform:translate(-3px,1px);opacity:.9}92%{transform:translate(3px,-1px);opacity:.9}96%{transform:translate(-1px,0);opacity:.9}}@media (prefers-reduced-motion:reduce){.pixel-broke-ghost{animation:none!important}}`

const brokenClip =
  "polygon(0 0, 38% 0, 38% 12%, 46% 12%, 46% 0, 100% 0, 100% 62%, 94% 62%, 94% 74%, 100% 74%, 100% 100%, 64% 100%, 64% 88%, 56% 88%, 56% 100%, 0 100%, 0 38%, 6% 38%, 6% 26%, 0 26%)"

export interface PixelBrokeButtonProps extends React.ComponentProps<"button"> {
  /** Accent color of the fragments and text */
  color?: string
}

export function PixelBrokeButton({ color = "#22d3ee", className, children, style, ...props }: PixelBrokeButtonProps) {
  return (
    <>
      <style href="pixel-broke-button" precedence="default">
        {css}
      </style>
      <button
        className={cn(
          "group relative inline-flex h-12 items-center justify-center px-8 font-mono text-sm font-bold uppercase tracking-widest transition-transform duration-100 active:translate-y-px",
          "focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-dashed focus-visible:outline-current",
          "disabled:pointer-events-none disabled:opacity-50",
          className
        )}
        style={{ color, ...style }}
        {...props}
      >
        <span
          aria-hidden
          className="pixel-broke-ghost pointer-events-none absolute inset-0 bg-fuchsia-500/70 mix-blend-screen"
          style={{ clipPath: brokenClip, animation: "pixel-broke-glitch 3s steps(1) infinite" }}
        />
        <span
          aria-hidden
          className="pointer-events-none absolute inset-0 bg-zinc-950 transition-colors duration-150 group-hover:bg-zinc-900"
          style={{ clipPath: brokenClip }}
        />
        <span
          aria-hidden
          className="pointer-events-none absolute inset-0 opacity-90"
          style={{ clipPath: brokenClip, boxShadow: "inset 0 0 0 2px currentColor" }}
        />
        <span aria-hidden className="pointer-events-none absolute left-[38%] top-0 h-1 w-[8%] bg-current" />
        <span aria-hidden className="pointer-events-none absolute bottom-0 left-[56%] h-1 w-[8%] bg-current" />
        <span aria-hidden className="pointer-events-none absolute right-0 top-[62%] h-[12%] w-1 bg-current" />
        <span className="relative inline-flex items-center gap-2 transition-[text-shadow] group-hover:[text-shadow:0_0_8px_currentColor]">
          {children}
        </span>
      </button>
    </>
  )
}
```