Skeuomorphic Button in Framer

I discovered this fantastic skeuomorphic button by Petr Knoll and recreated it in Framer. The entire interaction is built without any code—so feel free to use it in your own projects!

Created by

Nandi

Prianca

and

Petr

3D rendered 'Push' button with a cursor icon indicating a clickable interface, set on a light gray background

About the resource

I created this realistic-looking skeuomorphic button using a mix of gradients and shadows. For interactions, I turned it into a component and created hover and pressed states - tweaking the shadows and opacity to make it feel like a real button when you interact with it!

About the resource

Three stages of a 3D 'Push' button interface showing default, hover, and pressed states in a vertical alignment on a white background — The default, hover and pressed variants of the skeuomorphic button component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

More resources

View all

3D Letter Testimonials in Framer
Component
3D Letter Testimonials in Framer
Component
Apple Tooltip Interaction in Framer
Component
Apple Tooltip Interaction in Framer
Component