New
New
New
Component
Glassy Button in Framer
This is a glassy button design, made entirely in Framer and inspired by the amazing work of Wojciech Zieliński. If you’ve ever wondered how to achieve a glassy look in Framer, now’s your chance to remix the project and dive into the layers and details.
Created by
About the resource
Creating realistic elements in any design tool requires 3 things:
More layers than you’d think.
Gradients instead of solid colors.
A bunch of drop and inner shadows.
If you can use these elements in a smart way, you can create any real element in Framer too.
About the resource
Creating realistic elements in any design tool requires 3 things:
More layers than you’d think.
Gradients instead of solid colors.
A bunch of drop and inner shadows.
If you can use these elements in a smart way, you can create any real element in Framer too.
About the resource
Creating realistic elements in any design tool requires 3 things:
More layers than you’d think.
Gradients instead of solid colors.
A bunch of drop and inner shadows.
If you can use these elements in a smart way, you can create any real element in Framer too.
The layers structure of the glassy button component in Framer.
The layers structure of the glassy button component in Framer.
The layers structure of the glassy button component in Framer.
If you take a peek at the layers structure of this button example, you can see that it uses a few things:
Border (left, mid and right), which creates the white gradient border around the button. It’s broken up into 3 pieces to keep the button nice and responsive.
Fill, which is the layer for the main fill color of the button.
Reflection, which is used for the subtle white reflection/highlight seen on the bottom half of the button.
Keep in mind that these layers have extra stuff on them like gradient fills, drop and inner shadows, as well as background and regular blur effects.
Now go ahead and try recreating something in Framer to practice your new knowledge!
If you take a peek at the layers structure of this button example, you can see that it uses a few things:
Border (left, mid and right), which creates the white gradient border around the button. It’s broken up into 3 pieces to keep the button nice and responsive.
Fill, which is the layer for the main fill color of the button.
Reflection, which is used for the subtle white reflection/highlight seen on the bottom half of the button.
Keep in mind that these layers have extra stuff on them like gradient fills, drop and inner shadows, as well as background and regular blur effects.
Now go ahead and try recreating something in Framer to practice your new knowledge!
If you take a peek at the layers structure of this button example, you can see that it uses a few things:
Border (left, mid and right), which creates the white gradient border around the button. It’s broken up into 3 pieces to keep the button nice and responsive.
Fill, which is the layer for the main fill color of the button.
Reflection, which is used for the subtle white reflection/highlight seen on the bottom half of the button.
Keep in mind that these layers have extra stuff on them like gradient fills, drop and inner shadows, as well as background and regular blur effects.
Now go ahead and try recreating something in Framer to practice your new knowledge!
