Learn how to add depth to a button with inner shadows, gradients, and realistic outer shadows in Framer. A top white shadow creates shine, a bottom black shadow adds depth, and a hover state that lightens the button makes it feel interactive and real.
Chapters
So how do you go from this to this? And why does this button look and feel more real? The first button only has two colors applied, the background and the text color. And sometimes that's enough, but not today. Because today we're gonna get this button to pop and we'll apply some multi-layered shadows. First, we're gonna apply a top inner white shadow that acts as the shine of the button. Then we'll apply a bottom inner black shadow that will start to give the button a dynamic round shape. Then we'll apply Framer's realistic outer shadow effect to give it separation from the background. And finally, we'll set the button color to linear to bring it home to that rounded goodness. And for bonus points, we'll make it lighter when we hover on it, which is sick because I've always wondered