Bouncy Icon Button Component

This is a bouncy button component, an original creation by Rauno, but recreated in Framer. It's a super fun micro-interaction that can bring a dash of life and fun to your icon buttons.

Created by

Nandi

and

Rauno

About the resource

To achieve the bounciness, we shift the icon on the pressed state of the component, and we also incorporate a neat trick to make the button appear smaller on click. The trick is to make the button's background color a completely separate frame. We can then make this smaller on press, which results in achieving that bouncy feel.

About the resource

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

Morphing Tabs Interaction in Framer
Component
Morphing Tabs Interaction in Framer
Component
Morphing Tabs Interaction in Framer
Component
Magnetic Hover Component for Framer
Component
Magnetic Hover Component for Framer
Component
Magnetic Hover Component for Framer
Component