Skeuomorphic Switch in Framer

This is a Framer recreation of the awesome skeuomorphic button concept by Fateh Zid. I didn't write any code to make this interaction. Feel free to copy the component to your project.

Created by

Nandi

and

Fateh

About This Resource

Framer is an amazing tool. I could create this switch in just a couple of minutes by drawing frames on a design canvas. To achieve the skeuomorphic look, I used gradients, blur, and shadows.

For the interaction, I turned the switch into a component, created "off" and "on" variants, and connected the two with tap interactions. Yeah, it's that simple.

About This Resource

Framer is an amazing tool. I could create this switch in just a couple of minutes by drawing frames on a design canvas. To achieve the skeuomorphic look, I used gradients, blur, and shadows.

For the interaction, I turned the switch into a component, created "off" and "on" variants, and connected the two with tap interactions. Yeah, it's that simple.

About This Resource

Framer is an amazing tool. I could create this switch in just a couple of minutes by drawing frames on a design canvas. To achieve the skeuomorphic look, I used gradients, blur, and shadows.

For the interaction, I turned the switch into a component, created "off" and "on" variants, and connected the two with tap interactions. Yeah, it's that simple.

switch component variants — Switch component variants inside of Framer.

Learn how I went from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.

Get your FREE ticket

Learn how I went from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.

Get your FREE ticket

Learn how I went from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.

Get your FREE ticket

More resources

View all

Playlist Generation Circular Animation in Framer
Component
Playlist Generation Circular Animation in Framer
Component
3D Letter Testimonials in Framer
Component
3D Letter Testimonials in Framer
Component