About Depth Button

Explore the best Framer components ↗

About

Depth Button is an interactive Framer button that gives your call to action a layered, three-dimensional look. Stacked shadows add depth beneath the button, while an optional hover movement shifts its surface and changes its colors. Choose a filled or outlined style to give links and primary actions a playful or more restrained finish. Choose the animated style for a moving hover response or keep the raised silhouette static for a quieter interaction.

What you can customize

Make the button fit your brand, from its label and typography to the shape and direction of its depth. Set the link and new-tab behavior, then choose background, text and hover colors. Adjust the number of shadow layers, their direction and tone, corner radius and padding. Switch between animated and static movement, or add a glow on hover. All controls are available in Framer without editing code. Use a lighter or darker shadow tone to complement your palette, and adjust the outline fill for a contrasting look. The button can be sized within your Framer layout and reused across the pages of a project.