How To Create A Galaxy Button in Framer

How To Create A Galaxy Button in Framer

  • Guide

  • Button
  • Code override
  • Guide

  • Button
  • Code override
  • Guide

  • Button
  • Code override

How To Create A Galaxy Button in Framer

Framer is a powerful no-code website builder for designers that offers a wide range of features, including components and variants that allow you to create mesmerizing hover effects without writing any code. In this tutorial, I show you how to create a galaxy hover effect for your Framer website. Feel free to remix the project and use it on your Framer website.

Originally seen on genius.design.

image of Nandi Muzsik

Posted by

Nandi

galaxy button in Framer
galaxy button in Framer
galaxy button in Framer

Table of contents

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 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 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 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 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 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 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 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 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.

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.

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!

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!

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!

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 posts

More posts

  • Neon purple 'Smooth Scroll' button with Component logo icon

    How to Add Smooth Scroll to Your Framer Website

    Guide

    Neon purple 'Smooth Scroll' button with Component logo icon

    How to Add Smooth Scroll to Your Framer Website

    Guide

    Neon purple 'Smooth Scroll' button with Component logo icon

    How to Add Smooth Scroll to Your Framer Website

    Guide

  • loading transition in Framer

    How to Block Scrolling During the Website's Preloader in Framer

    Guide

    loading transition in Framer

    How to Block Scrolling During the Website's Preloader in Framer

    Guide

    loading transition in Framer

    How to Block Scrolling During the Website's Preloader in Framer

    Guide

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