Crazy Galaxy Button Hover Animation in Framer

Copy component

Crazy Galaxy Button Hover Animation in Framer

Copy component

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

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

Component

Crazy Galaxy Button Hover Animation in Framer

This is an out-of-this-world button component for Framer, bringing Alex Barashkov's galaxy hover animation to life. With its mesmerizing glow and swirling particles, it's sure to make your friends go "wow." The best part? You can easily add this impressive interaction to your site without writing any code.

image of Nandi Muzsik
Alex Barashkov

Created by

Glowing blue 'Generate' button with cursor hovering, symbolizing AI content creation
Glowing blue 'Generate' button with cursor hovering, symbolizing AI content creation
Glowing blue 'Generate' button with cursor hovering, symbolizing AI content creation
Glowing blue 'Generate' button with cursor icon, symbolizing AI-powered content creation

Related Lesson

Raw Process of Recreating a Crazy Hover Effect

Glowing blue 'Generate' button with cursor icon, symbolizing AI-powered content creation

Related Lesson

Raw Process of Recreating a Crazy Hover Effect

Glowing blue 'Generate' button with cursor icon, symbolizing AI-powered content creation

Related Lesson

Raw Process of Recreating a Crazy Hover Effect

About the resource

When creating these complex glowing graphics on websites, I usually use a bunch of drop shadows on elements to achieve the effect. When you combine these shadows with gradient fill colors, you can get some pretty amazing results.

About the resource

When creating these complex glowing graphics on websites, I usually use a bunch of drop shadows on elements to achieve the effect. When you combine these shadows with gradient fill colors, you can get some pretty amazing results.

About the resource

When creating these complex glowing graphics on websites, I usually use a bunch of drop shadows on elements to achieve the effect. When you combine these shadows with gradient fill colors, you can get some pretty amazing results.

Outer glow drop shadow layers.

Outer glow drop shadow layers.

Outer glow drop shadow layers.

You can see in this little video above, for example, how the outer glow effect of the button is built up with 3 separate drop shadows on the same element. Feel free to remix the project, by the way, to dig into each of the layers and their drop shadow settings.

The great thing about these drop shadows is that we can also animate them when we finally turn the button into a component and create multiple variants for it for the hover animation. We just tweak the opacity, y, blur, or spread values, and they'll all be nicely animated.

The particles component

Another notable element on this specific galaxy button is the particles effect that appears as we hover over the button. You can see how the particles move toward the bottom center of the button.

I achieved that effect with the particles component (created by Benjamin). You can get that component here.


You can see in this little video above, for example, how the outer glow effect of the button is built up with 3 separate drop shadows on the same element. Feel free to remix the project, by the way, to dig into each of the layers and their drop shadow settings.

The great thing about these drop shadows is that we can also animate them when we finally turn the button into a component and create multiple variants for it for the hover animation. We just tweak the opacity, y, blur, or spread values, and they'll all be nicely animated.

The particles component

Another notable element on this specific galaxy button is the particles effect that appears as we hover over the button. You can see how the particles move toward the bottom center of the button.

I achieved that effect with the particles component (created by Benjamin). You can get that component here.


You can see in this little video above, for example, how the outer glow effect of the button is built up with 3 separate drop shadows on the same element. Feel free to remix the project, by the way, to dig into each of the layers and their drop shadow settings.

The great thing about these drop shadows is that we can also animate them when we finally turn the button into a component and create multiple variants for it for the hover animation. We just tweak the opacity, y, blur, or spread values, and they'll all be nicely animated.

The particles component

Another notable element on this specific galaxy button is the particles effect that appears as we hover over the button. You can see how the particles move toward the bottom center of the button.

I achieved that effect with the particles component (created by Benjamin). You can get that component here.


The particles component in Framer.

The particles component in Framer.

The particles component in Framer.

The good thing about that particles component is that it's highly customizable. I could tweak it to get it super close to what we see on the original button concept.

I also did a trick: duplicated the particles component to have 3 in total and set different size, speed, and opacity properties on each of them. This resulted in a more complex and overall better-looking effect.

Quick tip: when you duplicate the particles component and you're using multiple on one page, make sure that each has a unique "ID" property set on the left panel (otherwise they're not gonna work).

The good thing about that particles component is that it's highly customizable. I could tweak it to get it super close to what we see on the original button concept.

I also did a trick: duplicated the particles component to have 3 in total and set different size, speed, and opacity properties on each of them. This resulted in a more complex and overall better-looking effect.

Quick tip: when you duplicate the particles component and you're using multiple on one page, make sure that each has a unique "ID" property set on the left panel (otherwise they're not gonna work).

The good thing about that particles component is that it's highly customizable. I could tweak it to get it super close to what we see on the original button concept.

I also did a trick: duplicated the particles component to have 3 in total and set different size, speed, and opacity properties on each of them. This resulted in a more complex and overall better-looking effect.

Quick tip: when you duplicate the particles component and you're using multiple on one page, make sure that each has a unique "ID" property set on the left panel (otherwise they're not gonna work).

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

  • Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component