Component
Bouncy Skeuomorphic Button in Framer
This is a Framer recreation of a bouncy skeuomorphic button based on Camden’s original work. Feel free to remix the project and see how such interactions can be built in Framer without any code.
About the resource
To create this bouncy skeuomorphic button, I combined multiple layers of soft linear gradients, inner and drop shadows to give it that squishy, pressable feel. The layer structure is important to get the visuals right: it starts with a hole frame, which contains hole mask, then button content, then text wrap, and finally the text layer.
Using this structure I built it as a component with three variants — Default, Hover, and Pressed. The states are connect with spring interaction with a bounce.
About the resource
To create this bouncy skeuomorphic button, I combined multiple layers of soft linear gradients, inner and drop shadows to give it that squishy, pressable feel. The layer structure is important to get the visuals right: it starts with a hole frame, which contains hole mask, then button content, then text wrap, and finally the text layer.
Using this structure I built it as a component with three variants — Default, Hover, and Pressed. The states are connect with spring interaction with a bounce.
About the resource
To create this bouncy skeuomorphic button, I combined multiple layers of soft linear gradients, inner and drop shadows to give it that squishy, pressable feel. The layer structure is important to get the visuals right: it starts with a hole frame, which contains hole mask, then button content, then text wrap, and finally the text layer.
Using this structure I built it as a component with three variants — Default, Hover, and Pressed. The states are connect with spring interaction with a bounce.
The three variants for different states of the skeu button.
The three variants for different states of the skeu button.
The three variants for different states of the skeu button.
