Bouncy Icon Button Component

Bouncy Icon Button Component

Bouncy Icon Button Component

Bouncy Icon Button Component

Component

Component

Component

Component

Bouncy Icon Button Component

Bouncy Icon Button Component

Bouncy Icon Button Component

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.

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.

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.

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.

Bouncy Button Component in Framer
Bouncy Button Component in Framer
Bouncy Button Component in Framer
Bouncy Button Component in Framer

Copy component

Copy component

Copy component

Copy component

Features

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.

Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how it's built.

Step 3 outline

Step / 03

Try recreating it for practice.

Step 4 outline

Step / 04

Or copy the component to your project.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.