A physical, 3D tactile React button component with tilt, squish, and real depth.

🔗 Live Demo: https://react-tilt-button.vercel.app/

Features:

• Tilts on hover (left / middle / right)
• Squishes on press
• Has a visible “side wall” (depth)
• Enforces physical constraints so it never breaks
• Supports predefined style variants
• Is fully configurable via props

Inspired by react-awesome-button, but implemented as a small, dependency-free component.

npm install react-tilt-button

import { TiltButton } from 'react-tilt-button';

<TiltButton onClick={() => alert('Clicked!')}>Click me</TiltButton>

Variants are predefined visual styles (material / theme presets).

<TiltButton variant="solid">Solid</TiltButton>
<TiltButton variant="outline">Outline</TiltButton>
<TiltButton variant="arcade">Arcade</TiltButton>
<TiltButton variant="carbon">Carbon</TiltButton>
<TiltButton variant="warning">Warning</TiltButton>

You can still override any value manually:

<TiltButton
    variant='solid'
    surfaceColor='#10b981'
>
    Custom Green
</TiltButton>

Try it live here:

👉 https://react-tilt-button.vercel.app/

The demo lets you:

• Test all variants
• Change geometry (depth, radius, tilt, etc.)
• See physical constraints in action
• Copy settings for your own usage

<TiltButton
    variant='arcade'
    width={400}
    height={120}
    elevation={20}
    pressInset={10}
    tilt={4}
    radius={14}
    motion={160}
>
    My Button
</TiltButton>

The component automatically clamps values:

• elevation ≤ height * 0.3
• pressInset ≤ elevation
• tilt ≤ elevation / 9
• radius ≤ (height - elevation) / 4

So the button:

• Never crashes
• Never inverts
• Never visually breaks

These override the selected variant.

The button supports a dynamic specular glare highlight that simulates light reflecting off the surface.

It automatically shifts based on hover position (left / middle / right) and fades out on press.

<TiltButton
    glareColor='#ffffff'
    glareOpacity={0.12}
    glareWidth={60}
>
    Shiny Button
</TiltButton>

• Action fires on mouse release
• Hover is split into left / middle / right zones
• This is a physical UI primitive, not a flat semantic button

All visuals are driven by CSS variables:

• --button-raise-level
• --press-inset
• --button-hover-pressure
• --radius
• --surface-color
• --side-color
• --text-color
• --border-color
• --border-width
• --glare-rgb
• --glare-alpha
• --glare-width

So you can theme it externally if needed.