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.
Created by
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.
The two variants of the metallic 3D button component.
The two variants of the metallic 3D button component.
The two variants of the metallic 3D button component.
