ObsidianUIObsidianUI
DocumentationRetro Pixel Button

Retro Pixel Button

A nostalgic retro-style button with a sliding pixel block animation and rotating arrow icon. Features smooth spring physics and a morphing text effect.

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/retro-pixel-button.json"

Install Manually

1

Install dependencies

npm install framer-motion clsx tailwind-merge
2

Copy the source code

Copy into components/ui/retro-pixel-button.tsx

"use client";
 
import React, { useState } from "react";
import { motion } from "framer-motion";
 
interface RetroPixelButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: React.ReactNode;
  pixelColor?: string;
  baseColor?: string;
  textColor?: string;
}
 
export default function RetroPixelButton({
  children = "TRY FOR FREE",
  pixelColor = "orange",
  baseColor,
  textColor,
  ...props
}: RetroPixelButtonProps) {
  const [isHovered, setIsHovered] = useState(false);
 
  return (
    <motion.button
      className="relative flex items-center h-16 px-8 border border-orange-300 overflow-hidden font-mono font-medium rounded-lg"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      {...props}
    >
      {/* Sliding pixel block with icon */}
      <motion.div
        animate={{ width: isHovered ? "97%" : "55px" }}
        transition={{ type: "spring", stiffness: 400, damping: 30 }}
      >
        {/* Pixel arrow icon */}
      </motion.div>
 
      {/* Morphing text */}
      <motion.div
        animate={{
          paddingLeft: isHovered ? 0 : 64,
          color: isHovered ? "#ffffff" : "currentColor",
        }}
      >
        {children}
      </motion.div>
    </motion.button>
  );
}

Note: The full implementation includes the pixel arrow SVG and blur effects. Install via CLI for complete code.

Examples

Custom Colors

import RetroPixelButton from '@/components/ui/retro-pixel-button'
 
export function CustomColors() {
  return (
    <RetroPixelButton 
      pixelColor="#3b82f6"
      baseColor="#1e293b"
      textColor="#ffffff"
    >
      CUSTOM STYLE
    </RetroPixelButton>
  )
}

With Click Handler

import RetroPixelButton from '@/components/ui/retro-pixel-button'
 
export function WithHandler() {
  return (
    <RetroPixelButton onClick={() => console.log('Clicked!')}>
      CLICK ME
    </RetroPixelButton>
  )
}

Props

Prop NameTypeDefaultDescription
childrenReact.ReactNodeTRY FOR FREEButton text content
pixelColorstringorangeColor of the sliding pixel block
baseColorstring-Background color override
textColorstring-Text color override
...propsButtonHTMLAttributes-All standard button props

Features

  • Retro Aesthetic: Pixel art arrow and monospace font
  • Sliding Animation: Smooth spring-based block expansion
  • Rotating Icon: Arrow rotates 180° on hover
  • Text Morphing: Blur and color transition effects
  • Spring Physics: Natural, bouncy animations
  • Customizable: Easy color and style overrides
Pixelated Image TrailRolling Ball Scroll Indicator