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

New

New

New

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

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

  • Animated Dotted Video Component in Framer with circular halftone pattern on a black background and bold white text overlay

    Dotted Video Component for Framer

    Component

    Animated Dotted Video Component in Framer with circular halftone pattern on a black background and bold white text overlay

    Dotted Video Component for Framer

    Component

    Animated Dotted Video Component in Framer with circular halftone pattern on a black background and bold white text overlay

    Dotted Video Component for Framer

    Component

  • Social media comparison showing YouTube at 67% versus Twitter at 33%

    Animated Bars in Framer

    Component

    Social media comparison showing YouTube at 67% versus Twitter at 33%

    Animated Bars in Framer

    Component

    Social media comparison showing YouTube at 67% versus Twitter at 33%

    Animated Bars in Framer

    Component