About this block

Shadow Buttons displays five button variants (Default, Secondary, Destructive, Outline, and Ghost) arranged in a centered, wrapping row. Every button starts flat with no shadow, and lifts with a soft drop shadow when hovered. The transition is smooth so the depth effect reads as tactile rather than abrupt.

All five variants are independent, so you can keep only the ones your interface needs. The labels are plain copy you can swap for any action text, and the row wraps naturally so the set works in a narrow column as well as a wide container.

When to use

Reach for this block when you want buttons that feel physically raised without committing to a bold border or fill animation. The lift effect suits a creative agency or studio site where even small interactions should feel considered. It works well across contact forms, project inquiry panels, and service pages where a subtle tactile cue invites a click without competing with the surrounding content.

Compared to Grow Buttons, which scales the button body, Shadow Buttons keep the footprint fixed and suggest depth through light alone, making them the quieter of the two options.

A natural flow around it on a Components page:

Before

• Cards to present a service or project offering that the button anchors at the bottom
• Badges to label the action tier or status above the button row

After

• Alerts to confirm or provide feedback after the user acts on a button
• Pulse Buttons as an alternative if you need continuous attention rather than hover depth

What you can customize

Each button in the row can be swapped, removed, or relabeled to match the actions on your page:

• Variant selection. Keep only the variants your layout needs, such as Default for primary actions and Outline for a secondary option alongside it.
• Button labels. Replace the demo text with your own action words like "Get a Quote", "View Work", or "Send Message" to match studio or agency copy.
• Row layout. The wrapping flex row adapts to any container width, so you can embed the set inside a card, a modal footer, or a full width section without adjusting the markup.

Tip: pairing a filled Default button with a Ghost button in the same row creates a clear primary and secondary hierarchy while keeping the hover lift consistent across both.