Guide
- Magnetic
- Button
Guide
- Magnetic
- Button
Guide
- Magnetic
- Button
How to Make Magnetic Buttons in Framer
In this Framer tutorial, you'll learn how to create a useless magnetic hover effect for your websites that’s inspired by the Luma website. I'll reveal a secret component and how you can put it into practice to create something useless but fun.
Posted by
Nandi
Table of contents
How the magnetic effect works
Before we start, let's break down what makes a button “magnetic.” Essentially, when you hover over a button, it moves slightly toward your cursor, creating a dynamic, interactive feel.
How the magnetic effect works
Before we start, let's break down what makes a button “magnetic.” Essentially, when you hover over a button, it moves slightly toward your cursor, creating a dynamic, interactive feel.
How the magnetic effect works
Before we start, let's break down what makes a button “magnetic.” Essentially, when you hover over a button, it moves slightly toward your cursor, creating a dynamic, interactive feel.
Magnetic hover effect.
Magnetic hover effect.
Magnetic hover effect.
This effect is controlled by:
Distance: How far the button moves toward the cursor.
Hover area: The space around the button that triggers the effect.
Children elements behavior: How elements inside the button respond to the hover.
Simply place the component inside the frame where you want the effect to apply. That’s it—seriously, it’s that easy.
Setting up your button
Open Framer and press F to create a new frame (this will be your button).
Click the play button to preview—right now, it's just a static frame.
To make it magnetic use the Magnetic Hover Component.
Drag and drop it into your frame.
At this point, the button will already have a subtle magnetic effect when hovered. Pretty cool, right?
Adjusting the magnetic effect
Now, let’s fine-tune the effect to make it feel just right.
Select the Magnetic Hover Component inside your button.
In the properties panel, adjust:
Distance: Increase this to make the button move more dramatically.
Hover area: Expanding this means the button reacts even when the cursor is not directly on it.
Smoothness: Controls how fluid the movement is.
This effect is controlled by:
Distance: How far the button moves toward the cursor.
Hover area: The space around the button that triggers the effect.
Children elements behavior: How elements inside the button respond to the hover.
Simply place the component inside the frame where you want the effect to apply. That’s it—seriously, it’s that easy.
Setting up your button
Open Framer and press F to create a new frame (this will be your button).
Click the play button to preview—right now, it's just a static frame.
To make it magnetic use the Magnetic Hover Component.
Drag and drop it into your frame.
At this point, the button will already have a subtle magnetic effect when hovered. Pretty cool, right?
Adjusting the magnetic effect
Now, let’s fine-tune the effect to make it feel just right.
Select the Magnetic Hover Component inside your button.
In the properties panel, adjust:
Distance: Increase this to make the button move more dramatically.
Hover area: Expanding this means the button reacts even when the cursor is not directly on it.
Smoothness: Controls how fluid the movement is.
This effect is controlled by:
Distance: How far the button moves toward the cursor.
Hover area: The space around the button that triggers the effect.
Children elements behavior: How elements inside the button respond to the hover.
Simply place the component inside the frame where you want the effect to apply. That’s it—seriously, it’s that easy.
Setting up your button
Open Framer and press F to create a new frame (this will be your button).
Click the play button to preview—right now, it's just a static frame.
To make it magnetic use the Magnetic Hover Component.
Drag and drop it into your frame.
At this point, the button will already have a subtle magnetic effect when hovered. Pretty cool, right?
Adjusting the magnetic effect
Now, let’s fine-tune the effect to make it feel just right.
Select the Magnetic Hover Component inside your button.
In the properties panel, adjust:
Distance: Increase this to make the button move more dramatically.
Hover area: Expanding this means the button reacts even when the cursor is not directly on it.
Smoothness: Controls how fluid the movement is.
The property controls of the Magnetic Hover component.
The property controls of the Magnetic Hover component.
The property controls of the Magnetic Hover component.
Adding children elements
To make the effect even cooler, let’s add elements inside the button that respond independently.
Press
Fto create another frame inside your button.Add a text layer or an icon.
Select the Magnetic Hover Component and look for the
Children Behaviorsettings.
Adjust:
Scale: Make the children elements shrink slightly on hover.
Movement distance: Set a different movement value so the child elements move at a different speed, creating a parallax effect.
This little tweak makes the effect feel much more dynamic!
Adding children elements
To make the effect even cooler, let’s add elements inside the button that respond independently.
Press
Fto create another frame inside your button.Add a text layer or an icon.
Select the Magnetic Hover Component and look for the
Children Behaviorsettings.
Adjust:
Scale: Make the children elements shrink slightly on hover.
Movement distance: Set a different movement value so the child elements move at a different speed, creating a parallax effect.
This little tweak makes the effect feel much more dynamic!
Adding children elements
To make the effect even cooler, let’s add elements inside the button that respond independently.
Press
Fto create another frame inside your button.Add a text layer or an icon.
Select the Magnetic Hover Component and look for the
Children Behaviorsettings.
Adjust:
Scale: Make the children elements shrink slightly on hover.
Movement distance: Set a different movement value so the child elements move at a different speed, creating a parallax effect.
This little tweak makes the effect feel much more dynamic!
Children behavior settings.
Children behavior settings.
Children behavior settings.
Enhancing the interaction
If you want to go the extra mile, you can combine the magnetic effect with other interactions. For example:
On click: Trigger a text reveal or morph the button shape.
On hover out: Add a subtle spring effect so the button smoothly returns to its original position.
Opacity & colors: Make the button change color or glow slightly as it moves.
Enhancing the interaction
If you want to go the extra mile, you can combine the magnetic effect with other interactions. For example:
On click: Trigger a text reveal or morph the button shape.
On hover out: Add a subtle spring effect so the button smoothly returns to its original position.
Opacity & colors: Make the button change color or glow slightly as it moves.
Enhancing the interaction
If you want to go the extra mile, you can combine the magnetic effect with other interactions. For example:
On click: Trigger a text reveal or morph the button shape.
On hover out: Add a subtle spring effect so the button smoothly returns to its original position.
Opacity & colors: Make the button change color or glow slightly as it moves.
Enhanced magnetic hover interaction.
Enhanced magnetic hover interaction.
Enhanced magnetic hover interaction.
These small details make the UI feel high-end and polished.
Wrapping up
Magnetic buttons are a simple yet powerful way to add an interactive touch to your Framer projects. With the Magnetic Hover Component, you can achieve this effect effortlessly.
I made a whole video tutorial on creating a useless magnetic hover effect for a website. If you’re looking for something more in-depth.
These small details make the UI feel high-end and polished.
Wrapping up
Magnetic buttons are a simple yet powerful way to add an interactive touch to your Framer projects. With the Magnetic Hover Component, you can achieve this effect effortlessly.
I made a whole video tutorial on creating a useless magnetic hover effect for a website. If you’re looking for something more in-depth.
These small details make the UI feel high-end and polished.
Wrapping up
Magnetic buttons are a simple yet powerful way to add an interactive touch to your Framer projects. With the Magnetic Hover Component, you can achieve this effect effortlessly.
I made a whole video tutorial on creating a useless magnetic hover effect for a website. If you’re looking for something more in-depth.
