Component
Pearl Button Component in Framer
About the resource
To create this UI style in Framer, we need to use multiple layers nested within each other and drop/inner shadows applied to each of them. By utilizing pinning with absolute positioning, we can also make sure that when we have different text in the button, the elements (highlights and so on) nicely adapt to the width of the button, creating a responsive design.
About the resource
To create this UI style in Framer, we need to use multiple layers nested within each other and drop/inner shadows applied to each of them. By utilizing pinning with absolute positioning, we can also make sure that when we have different text in the button, the elements (highlights and so on) nicely adapt to the width of the button, creating a responsive design.
About the resource
To create this UI style in Framer, we need to use multiple layers nested within each other and drop/inner shadows applied to each of them. By utilizing pinning with absolute positioning, we can also make sure that when we have different text in the button, the elements (highlights and so on) nicely adapt to the width of the button, creating a responsive design.
The structure of the pearl button.
The structure of the pearl button.
The structure of the pearl button.
You can see the structure of the layers that make up the pearl-like effect. Feel free to copy the component to your project or remix it to dig deeper into the drop shadows and gradient colors applied to them.
It's crazy that we can make this in Framer, just like we would in Figma, but in the end, we'll have a real button that we can use on a live working website, instead of just getting a static image. This is the magic of Framer.
You can see the structure of the layers that make up the pearl-like effect. Feel free to copy the component to your project or remix it to dig deeper into the drop shadows and gradient colors applied to them.
It's crazy that we can make this in Framer, just like we would in Figma, but in the end, we'll have a real button that we can use on a live working website, instead of just getting a static image. This is the magic of Framer.
You can see the structure of the layers that make up the pearl-like effect. Feel free to copy the component to your project or remix it to dig deeper into the drop shadows and gradient colors applied to them.
It's crazy that we can make this in Framer, just like we would in Figma, but in the end, we'll have a real button that we can use on a live working website, instead of just getting a static image. This is the magic of Framer.
