3D Clay Button Builder

Claymorphism is a tactile, playful UI style characterized by inflated three-dimensional shapes resembling sculpted modeling clay or soft marshmallow cushions. Unlike rigid flat design or cold metallic skeuomorphism, claymorphism relies on high corner radii, thick rounded profiles, and dual inner reflections to give interfaces an approachable, friendly, and gamified aesthetic.

Popularized alongside modern 3D illustration libraries, claymorphism solves the severe accessibility issues that crippled Neumorphism in 2020. While neumorphism used subtle low-contrast shadows that disappeared against background shades, claymorphism pairs vibrant saturated base colors with dark contrasting drop shadows, ensuring distinct boundary visibility.

To transform a flat CSS rectangle into an inflated convex bubble, two opposing light phenomena must occur within the button's perimeter:

• The Specular Keylight: An inner highlight (inset +x +y) with a bright white semi-transparent wash simulating overhead ambient illumination.
• The Underside Ambient Shadow: A dark inner shade (inset -x -y) on the opposite corner creating the optical illusion of material curvature.
• The Elevation Drop Shadow: An outer drop shadow with substantial vertical offset (0 Y Blur) that physically detaches the button from the background plane.

A static clay button loses half its magic without responsive haptic physics. When users hover, a slight expansion (scale(1.02)) coupled with a brightness boost signals readiness. On :active click, translating the element downwards while compressing the outer shadow creates the realistic sensation of depressing a soft rubber ball.