Create a Stunning 3D Magnet Effect Button with GSAP

Introduction

Interactive buttons enhance user experience and make a website feel more dynamic. In this tutorial, we’ll create a 3D magnet effect button using HTML, CSS, and GSAP (GreenSock Animation Platform). This effect makes the button smoothly follow the cursor, creating a magnetic pull effect.

Final Output Preview

Before we dive into the code, here is a preview of what we will build:

Step 1: Setting Up the Basic Structure

To begin, we need an HTML button inside a body tag. We also include Font Awesome for the button’s icon and GSAP via a CDN.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Magnet Effect Button</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
</head>
<body>
    <button class="btn"><i class="fas fa-magnet"></i> Hover Me</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
</body>
</html>

This structure creates a centered button with an icon.

Step 2: Styling the Button

Now, let's add CSS to style the button and apply a gradient background.

CSS Code

* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: linear-gradient(135deg, #dfe9f3, #f8e2cf, #f7d8e7);
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .btn {
        display: inline-block;
        padding: 15px 40px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(145deg, #3498db, #2980b9);
        border: none;
        border-radius: 15px;
        cursor: pointer;
        position: relative;
        transform-style: preserve-3d;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.136);
        transition: background 0.3s ease;
    }
    
    .btn:hover {
        background: linear-gradient(145deg, #4a9de6, #2c8dce);
    }

This CSS:

Centers the button
Adds a soft shadow
Applies a hover color transition

Step 3: Implementing the 3D Magnet Effect with GSAP

Now, let's add JavaScript to create the magnetic pull effect when the mouse moves over the button.

JavaScript Code

const btn = document.querySelector('.btn');
    btn.addEventListener('mousemove', (e) => {
        const { left, top, width, height } = btn.getBoundingClientRect();
        const x = e.clientX - (left + width / 2);
        const y = e.clientY - (top + height / 2);

        // add tilt effect
        let tiltVal = 20;
        const rotateX = (y / height) * tiltVal;
        const rotateY = (x / width) * -tiltVal;

        let strength = 0.3;
        gsap.to(btn, {
            x: x * strength,
            y: y * strength,
            rotationX: rotateX,
            rotationY: rotateY,
            transformPerspective: 500,
            transformOrigin: "center center",
            duration: 0.3,
            ease: "power2.out"
        })
    })
    // return back the button to inital position
    btn.addEventListener('mouseleave', () => {
        gsap.to(btn, {
            x: 0,
            y: 0,
            rotationX: 0,
            rotationY: 0,
            duration: 0.3,
            ease: 'power2.out'
        })
    })

How It Works?

mousemove Event:
- Captures the mouse position relative to the button.
- Calculates the rotationX and rotationY based on the cursor’s position.
- Moves and tilts the button smoothly with GSAP.
mouseleave Event:
- Resets the button to its original position.
- Ensures a natural movement when the cursor leaves the button.

Final Thoughts

This 3D magnet effect button adds a professional touch to UI buttons, making them more interactive and visually appealing. With GSAP animations, the effect remains smooth and efficient.

💡 Customization Tip: You can experiment with rotation values, animation speeds, and cursor strength to create a unique UI effect for your website.

🚀 Try this effect on your next project and make your buttons stand out!

Tags 3D magnet effect button GSAP button hover effect GSAP animation tutorial JavaScript button animation CSS hover effects interactive button design GSAP UI effects magnetic button effect GSAP cursor follow effect JavaScript hover animation