Docs / Retro Pixel Button

Retro Pixel Button

A retro-styled animated button with a sliding pixel block, smooth transitions, and customizable colors.

Installation
npx rareui add retro-pixel-button

Usage

Import the component

import RetroPixelButton from '@/components/rareui/retro-pixel-button';

Use in your application

export default function App() {
  return (
    <RetroPixelButton onClick={() => alert('Clicked!')}>
      CLICK ME
    </RetroPixelButton>
  );
}

Features

  • Retro Aesthetic: Font-mono styling with pixelated arrow icon.
  • Sliding Animation: Smooth spring-based expansion of the pixel block on hover.
  • Icon Rotation: Pixelated arrow rotates 180° during the hover transition.
  • Text Morphing: Text subtly blurs and shifts with a glitch-like effect.
  • Fully Customizable: Control pixel block, base, and text colors independently.

Props

PropTypeDefaultDescription
childrenReact.ReactNode"TRY..."The button text content.
pixelColorstring"orange"Color of the sliding pixel block.
baseColorstring-Optional background color override.
textColorstring-Optional text color override.
classNamestring-Additional CSS classes.
Previous
Next