Metallic 3D Button Interaction in Framer

Copy component

Metallic 3D Button Interaction in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Metallic 3D Button Interaction in Framer

This is a metallic 3D button interaction recreated in Framer from Camden’s design. Remix the project or copy the component directly into your own projects.

image of Nandi Muzsik
image of Prianca S.
Image of Camden

Created by

,

and

Metallic 3D call-to-action button with glowing blue arrow and text 'Lets Grow!' on dark background – modern UI design element with hover interaction
Metallic 3D call-to-action button with glowing blue arrow and text 'Lets Grow!' on dark background – modern UI design element with hover interaction
Metallic 3D call-to-action button with glowing blue arrow and text 'Lets Grow!' on dark background – modern UI design element with hover interaction

About the resource

To create this button, I used multiple layers with different linear gradients and shadows to achieve a metallic 3D look. I added a metallic blue button with similar styling and a separate glow layer for the hover state. This glow layer, with a white fill and drop shadows, is wrapped in another frame, which is resized to fill the middle area in the slide variant. For interactions, I linked the default and slide variants using mouse enter and mouse leave triggers.

About the resource

To create this button, I used multiple layers with different linear gradients and shadows to achieve a metallic 3D look. I added a metallic blue button with similar styling and a separate glow layer for the hover state. This glow layer, with a white fill and drop shadows, is wrapped in another frame, which is resized to fill the middle area in the slide variant. For interactions, I linked the default and slide variants using mouse enter and mouse leave triggers.

About the resource

To create this button, I used multiple layers with different linear gradients and shadows to achieve a metallic 3D look. I added a metallic blue button with similar styling and a separate glow layer for the hover state. This glow layer, with a white fill and drop shadows, is wrapped in another frame, which is resized to fill the middle area in the slide variant. For interactions, I linked the default and slide variants using mouse enter and mouse leave triggers.

Animated metallic 3D button transition from 'Get Started' to 'Lets Grow!' with sliding blue arrow interaction on dark UI background – modern microinteraction design in Framer

The two variants of the metallic 3D button component.

Animated metallic 3D button transition from 'Get Started' to 'Lets Grow!' with sliding blue arrow interaction on dark UI background – modern microinteraction design in Framer

The two variants of the metallic 3D button component.

Animated metallic 3D button transition from 'Get Started' to 'Lets Grow!' with sliding blue arrow interaction on dark UI background – modern microinteraction design in Framer

The two variants of the metallic 3D button component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

    A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

    A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

  • Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component

    Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component

    Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component