Shadow Buttons
Buttons with layered shadows that lift or shift on hover. Give actions a tactile, raised feel across cards, forms, and toolbars in any layout.
Buttons with layered shadows that lift or shift on hover. Give actions a tactile, raised feel across cards, forms, and toolbars in any layout.
Search blocks by description or jump to a page.
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.
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
After
Each button in the row can be swapped, removed, or relabeled to match the actions on your page:
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.