Resources

Skeuomorphic Button in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Skeuomorphic Button in Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How to Make $10K+ with Framer in 60 days

Get the course

How to Make $10K+ with Framer in 60 days

Get the course

Component

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!

image of Nandi Muzsik
image of Prianca S.
Image of Petr Knoll

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

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

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!

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.

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.

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.

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

More resources

More resources

View all

  • Web Haptics for Framer component with feedback examples

    Mobile Haptics in Framer

    Component

    Web Haptics for Framer component with feedback examples

    Mobile Haptics in Framer

    Component

  • Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

    Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component