How To Create A Galaxy Button in Framer

Step 01: Setting up the Button

To start, type out your text and wrap it in a stack using Framer’s intuitive visual canvas (shortcut: ⌥ + ⌘ + ⏎). Adjust the padding, set a fill color, and set a border. Set its tag to “button” to make it easy to identify.

Step 02: Adding the Galaxy Image

Next, add a frame to the button (make it huge) and set its position to absolute and center it. Make sure it’s behind the text by setting its z-index to 0. Set an image fill (in this case: galaxy image) to give it a unique look and feel.

Step 03: Creating the Code Override

To make the galaxy image move, we need to use a code override. Don’t worry, it’s nothing crazy, and you don’t need to know how to code. Simply select the image, add a code override, and select a new file to create a new override. Paste in this code.

Step 04: Setting up the Hover State

Now we need to set up the hover state on the button. Select the button and create a component (shortcut: ⌥ + ⌘ + K). Add a drop shadow with 0% color (this will be the glow) and set the image’s opacity to 0.

Step 05: Adding the Hover Effect

Now add a hover state to the button. Change the drop shadow’s color to 10%+ (so you can see it), set the image’s opacity to 1, and change the border color to a brighter color.

Conclusion

And there you have it! You’ve created a stunning galaxy hover effect using Framer components and code overrides. Framer is a powerful no-code website builder for designers that offers a wide range of features so of you're not already building your sites with Framer, start today!