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.
Posted by
Nandi
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!
