React Corner Accent Button

Powered by

React

Tailwind CSS

Remember those fancy gift boxes with decorative corners that catch the light? The ones where every detail feels intentional and premium? Most buttons feel flat and uninspired—just rectangles with color changes. This React component brings that gift-box elegance to your interface with animated corner accents that expand outward on hover, plus a sliding background that creates depth and movement.

Expanding corners with sliding background

Watch corner accents expand while a smooth background slides in from the left:

import { CornerAccentButton } from "@/components/ui/shadcn-io/corner-accent-button"export default function CornerAccentButtonDemo() {  return (    <div className="w-full p-6 flex justify-center">      <CornerAccentButton />    </div>  )}

'use client';import React from 'react';import { cn } from '@/lib/utils';export interface CornerAccentButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {  children?: React.ReactNode;}export const CornerAccentButton = React.forwardRef<HTMLButtonElement, CornerAccentButtonProps>(({  className,  children = "Get Started",  ...props}, ref) => {  return (    <button       ref={ref}      className={cn(        "relative flex items-center px-6 py-3 overflow-hidden font-medium transition-all bg-indigo-500 rounded-md group",        className      )}      {...props}    >      {/* Top right corner accent */}      <span className="absolute top-0 right-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out bg-indigo-700 rounded group-hover:-mr-4 group-hover:-mt-4">        <span className="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white" />      </span>            {/* Bottom left corner accent */}      <span className="absolute bottom-0 rotate-180 left-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out bg-indigo-700 rounded group-hover:-ml-4 group-hover:-mb-4">        <span className="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white" />      </span>            {/* Sliding background */}      <span className="absolute bottom-0 left-0 w-full h-full transition-all duration-500 ease-in-out delay-200 -translate-x-full bg-indigo-600 rounded-md group-hover:translate-x-0" />            {/* Button text */}      <span className="relative w-full text-left text-white transition-colors duration-200 ease-in-out group-hover:text-white">        {children}      </span>    </button>  );});CornerAccentButton.displayName = "CornerAccentButton";

Built for React applications with TypeScript and Next.js. Uses pure CSS transitions for buttery-smooth animations that run at 60fps. The layered design creates real depth with corner decorations floating above the sliding background. Perfect for CTAs that need to stand out without being overwhelming. Seamless integration with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/corner-accent-button.json

npx shadcn@latest add https://www.shadcn.io/registry/corner-accent-button.json

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

bunx shadcn@latest add https://www.shadcn.io/registry/corner-accent-button.json

Why flat buttons disappear into the page

Developers slap a background color on a button and call it done. Maybe add a hover state that slightly darkens it. The problem? Users' eyes glaze over these generic rectangles. They don't communicate importance or create visual hierarchy.

Corner accents change the game. They add geometric interest that draws the eye without being gaudy. The expanding motion on hover creates anticipation—like unwrapping something special. The sliding background adds a third dimension that makes the button feel interactive before you even click it.

This component handles the complex layering and timing automatically. Three separate animation layers work in harmony: corner expansion, background slide, and text color transitions. The result feels cohesive and intentional, not like three random effects thrown together.

Features

• Animated corner accents that expand outward on hover creating a frame effect
• Sliding background layer with smooth left-to-right reveal animation
• Multi-layer architecture with proper z-indexing for depth perception
• Customizable content accepting any React children for flexible text/icons
• TypeScript support with complete button prop forwarding and type safety
• Smooth transitions using GPU-accelerated transforms for 60fps animation
• Accessibility maintained with proper button semantics and keyboard support
• Responsive design adapting to content width while maintaining corner proportions

API Reference

CornerAccentButton

Animation Breakdown

The component uses three coordinated animations:

Customization Examples

// Custom text
<CornerAccentButton>Start Free Trial</CornerAccentButton>

// With icon
<CornerAccentButton>
  <span className="flex items-center gap-2">
    <Rocket className="w-4 h-4" />
    Launch App
  </span>
</CornerAccentButton>

// Custom colors via className
<CornerAccentButton className="bg-purple-500 hover:bg-purple-600">
  Premium Access
</CornerAccentButton>

Common gotchas

Text contrast during animation: The text color is white throughout the animation. If you customize the background colors, ensure sufficient contrast is maintained during all animation states.

Corner accent positioning: The corner decorations use absolute positioning with specific transforms. Parent containers with transform or will-change properties might create new stacking contexts that affect corner rendering.

Animation timing overlap: The background slide has a 200ms delay to create a staggered effect. Rapidly hovering on/off might interrupt this timing, though the animation handles interruption gracefully.

Button width changes: The button adapts to content width. Very long text might cause the corner accents to appear disproportionally small. Consider setting a max-width for optimal visual balance.

Mobile touch behavior: On touch devices, the hover state triggers on tap and persists until another element is touched. This is standard mobile behavior but might feel different from desktop hover interactions.

You might also like

Questions developers actually ask