Component
Glass Button in Framer
This is a Framer recreation of the glass button interaction originally created by Petr Knoll. Remix the project to explore how this glass effect can be built in Framer without any code.
Created by
About the resource
To create the glass button, I set up three states: Default, Hover, and Pressed.
In the base state, there are two text layers. I added an inner shadow effect using a frame with a black border and some blur, then wrapped it with a linear mask to add depth.
For the shine, I used a linear fill frame on top, and for the tiny dots in the background, I added a tiled fill. The moving shadows on hover come from two shadow stacks, one on the left and one on the right. Each uses a blurred gradient image with adjusted opacity to match the lighting. I also added a soft drop shadow to the whole button and a 3D depth layer underneath using 3D transforms.
On hover, the button scales up slightly, and the depth layer shifts to move the shadows. The two text layers also merge here for a smoother look.
In the pressed state, the button and depth layer rotate a bit on the X-axis, with an extra inner shadow added for that pressed feel. Finally, the variants are connected with Mouse Enter and Mouse Leave interactions.
About the resource
To create the glass button, I set up three states: Default, Hover, and Pressed.
In the base state, there are two text layers. I added an inner shadow effect using a frame with a black border and some blur, then wrapped it with a linear mask to add depth.
For the shine, I used a linear fill frame on top, and for the tiny dots in the background, I added a tiled fill. The moving shadows on hover come from two shadow stacks, one on the left and one on the right. Each uses a blurred gradient image with adjusted opacity to match the lighting. I also added a soft drop shadow to the whole button and a 3D depth layer underneath using 3D transforms.
On hover, the button scales up slightly, and the depth layer shifts to move the shadows. The two text layers also merge here for a smoother look.
In the pressed state, the button and depth layer rotate a bit on the X-axis, with an extra inner shadow added for that pressed feel. Finally, the variants are connected with Mouse Enter and Mouse Leave interactions.
About the resource
To create the glass button, I set up three states: Default, Hover, and Pressed.
In the base state, there are two text layers. I added an inner shadow effect using a frame with a black border and some blur, then wrapped it with a linear mask to add depth.
For the shine, I used a linear fill frame on top, and for the tiny dots in the background, I added a tiled fill. The moving shadows on hover come from two shadow stacks, one on the left and one on the right. Each uses a blurred gradient image with adjusted opacity to match the lighting. I also added a soft drop shadow to the whole button and a 3D depth layer underneath using 3D transforms.
On hover, the button scales up slightly, and the depth layer shifts to move the shadows. The two text layers also merge here for a smoother look.
In the pressed state, the button and depth layer rotate a bit on the X-axis, with an extra inner shadow added for that pressed feel. Finally, the variants are connected with Mouse Enter and Mouse Leave interactions.
The three variants of the glass button component.
The three variants of the glass button component.
The three variants of the glass button component.
