How to Build Magnetic Elements in Webflow - No Code Solution

How to Create a Beautiful Magnetic Button Hover Effect using Webflow

Are you looking to add some creative flair to your Webflow website's buttons? Look no further than the magnetic button hover effect! In this tutorial, we'll show you how to create this effect step-by-step using Webflow.

Introduction

Hi there! My name is Marvin Aziz, and I'm excited to guide you through creating a beautiful magnetic button hover effect using Webflow. In this tutorial, we'll be creating a custom button with a magnetic effect that activates when you hover over it.

Getting Started

Let's jump right in! The following are the steps we'll be following to create our magnetic button:

1. Create a custom button using a link block with text inside and a background wrapper.
2. Add another div block and place your button inside it to create a broader hover area.
3. Go to the interaction and select "mouse move over element" to activate the magnetic effect.
4. Create a new animation and name it "magnetic mouse tutorial." Set the starting position and move the element backward on both axes, then move it forward at 100 percent on both axes to create the magnetic effect.
5. Adjust the animation to make it smoother and remove the triggers for mobile views.
6. Apply the magnetic block class to other elements like headings or images to create the same effect.

Step-by-Step Instructions

Let's take a closer look at each step to create our magnetic button.

Step 1: Create a Custom Button

We'll start by creating a custom button using a link block with text inside and a background wrapper. To do this, follow these steps:

1. Open Webflow and create a new project.
2. Drag a link block onto your page and add text inside.
3. Select the link block and add a background wrapper by clicking the "plus" icon in the Styles panel and selecting "Background" from the dropdown menu.
4. Customize the background wrapper to your liking, for example by adding a gradient or an image.

Step 2: Add Another Div Block

Next, we'll add another div block and place our button inside it to create a broader hover area. Here's how:

1. Drag a div block onto your page and place it above your button.
2. Drag your button inside the div block.
3. Adjust the div block's size and position to your liking.

Step 3: Activate the Magnetic Effect

Now, let's activate the magnetic effect by following these steps:

1. Select the div block containing your button.
2. Click the "Add Interaction" button in the Interactions panel.
3. Select "Mouse Move Over Element" from the dropdown menu.
4. Adjust the distance and strength settings to your liking.

Step 4: Create a New Animation

We'll create a new animation and name it "magnetic mouse tutorial." Here's how:

1. Click the "New Animation" button in the Animations panel.
2. Name the animation "magnetic mouse tutorial."
3. Set the starting position by selecting "Current."
4. Move the element backward on both axes by setting the X and Y positions to -10px.
5. Move the element forward at 100 percent on both axes by setting the X and Y positions to 10px.
6. Adjust the duration and easing settings to your liking.

Step 5: Adjust the Animation

To make the animation smoother, follow these steps:

1. Select the "magnetic mouse tutorial" animation.
2. Adjust the duration, easing, and delay settings to your liking.
3. Remove the triggers for mobile views by clicking the "Edit Triggers" button and unchecking "Mobile Landscape," "Mobile Portrait," and "Tablet Landscape."

Thanks a lot for going through this tutorial! Did you know that I have a newsletter where I send you all my best templates, chosen creative work and share everything that I learn while working as an agency owner? Check it out!

‍