Liquid Button Hover Animation in Framer

Liquid Button Hover Animation in Framer

Liquid Button Hover Animation in Framer

Liquid Button Hover Animation in Framer

Component

Component

Component

Component

Liquid Button Hover Animation in Framer

Liquid Button Hover Animation in Framer

Liquid Button Hover Animation in Framer

Liquid Button Hover Animation in Framer

This is a liquid button hover animation created in Framer, inspired by the button effect seen on the Mercury website. Feel free to copy the component and use it on your site.

This is a liquid button hover animation created in Framer, inspired by the button effect seen on the Mercury website. Feel free to copy the component and use it on your site.

This is a liquid button hover animation created in Framer, inspired by the button effect seen on the Mercury website. Feel free to copy the component and use it on your site.

This is a liquid button hover animation created in Framer, inspired by the button effect seen on the Mercury website. Feel free to copy the component and use it on your site.

Liquid Button Hover Animation in Framer
Liquid Button Hover Animation in Framer
Liquid Button Hover Animation in Framer
Liquid Button Hover Animation in Framer

Copy component

Copy component

Copy component

Copy component

About The Resource

This button component is pretty simple. It is a frame that has a text layers which is the label of the button, and an additional background layer called "Liquid BG" which is a code component. I only show this code component on the hover state of the button by setting its opacity to 1.

liquid button component detail view
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, or copy and paste it 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.