React Text Reveal Button

Powered by

React

Tailwind CSS

Ever seen a neon sign flicker to life? That moment when letters emerge from darkness, glowing with electric intensity? Most button hover effects are predictable—color shifts, tiny scales, maybe a shadow. This React component recreates that satisfying reveal moment where text materializes from transparent outlines into vibrant, glowing letters.

Animated text reveal on hover

Watch text emerge from stroke outlines with smooth border animation and glowing effects:

import { TextRevealButton } from "@/components/ui/shadcn-io/text-reveal-button"export default function TextReveal() {  return (    <div className="w-full p-6 flex justify-center">      <TextRevealButton text="shadcn.io" />    </div>  )}

'use client';import React from 'react';import { cn } from '@/lib/utils';export interface TextRevealButtonProps  extends React.ButtonHTMLAttributes<HTMLButtonElement> {  text?: string;  revealColor?: string;  strokeColor?: string;}export const TextRevealButton = React.forwardRef<  HTMLButtonElement,  TextRevealButtonProps>(({  text = "shadcn.io",  revealColor = "#37FF8B",  strokeColor = "rgba(100, 100, 100, 0.7)",  className,  style,  ...props}, ref) => {  return (    <button      ref={ref}      className={cn(        "group relative cursor-pointer bg-transparent border-none p-0 m-0 h-auto font-['Arial'] uppercase",        className      )}      style={{        fontSize: '2em',        letterSpacing: '3px',        color: 'transparent',        WebkitTextStroke: `1px ${strokeColor}`,        ...style,      }}      {...props}    >      <span>        &nbsp;{text}&nbsp;      </span>      <span        aria-hidden="true"        className="absolute inset-0 w-0 overflow-hidden transition-all duration-500 group-hover:w-full group-hover:[filter:drop-shadow(0_0_23px_#37FF8B)]"        style={{          color: revealColor,          borderRight: `6px solid ${revealColor}`,          WebkitTextStroke: `1px ${revealColor}`,        }}      >        &nbsp;{text}&nbsp;      </span>    </button>  );});TextRevealButton.displayName = "TextRevealButton";

Built for React applications with TypeScript and Next.js. Uses pure CSS transforms and Tailwind utilities for smooth 60fps animations. The text stroke effect works across all modern browsers, with the reveal animation powered by CSS transitions that feel natural and responsive.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/text-reveal-button.json

npx shadcn@latest add https://www.shadcn.io/registry/text-reveal-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/text-reveal-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/text-reveal-button.json

Why boring hover effects kill engagement

Developers default to hover:bg-blue-600 and wonder why users don't engage. The problem isn't the color change—it's the lack of anticipation. Users expect interactions to feel responsive, not mechanical.

Text reveal creates anticipation. The gradual unveiling makes users want to hover again, testing if the animation is as smooth as they remember. This React component handles the complex layering: stroke outlines, animated borders, glowing shadows, and smooth transitions that feel premium without being distracting.

The stroke effect works by overlaying two identical text elements—one with transparent fill and white stroke, another with colored fill that reveals on hover. The moving border creates the "typewriter" effect as text appears.

Features

• Smooth text reveal animation with customizable timing and easing curves
• Glowing shadow effects that intensify on hover for premium feel
• Text stroke outlines using -webkit-text-stroke for clean typography
• CSS-only animations with no JavaScript dependencies for optimal performance
• TypeScript ready with full prop types and customization options
• Responsive design that works across all screen sizes and devices
• Accessible interactions with proper focus states and keyboard support
• Customizable colors for text, stroke, and glow effects

API Reference

TextRevealButton

The main component for animated text reveal effects with stroke and glow.

Color Customization

Popular color combinations for different brand personalities:

Common gotchas

Text width changes: If you change the text content dynamically, the button width might jump. Consider using a monospace font or fixed-width container for consistent sizing.

Stroke browser support: The -webkit-text-stroke property works in all modern browsers but falls back to regular text in older ones. The animation still works, just without the outline effect.

Mobile touch behavior: On touch devices, the hover state persists until another element is touched. Consider adding a tap-to-reset behavior for better mobile UX.

High contrast mode: In high contrast or accessibility modes, the stroke outline might be forced to different colors. Test with Windows high contrast mode enabled.

Performance on low-end devices: The glow filter effect can impact performance on older mobile devices. Consider reducing glowIntensity or removing it entirely for better performance.

You might also like

Explore other interactive button components for React applications:

Questions developers actually ask