CSS Animation Example: Magnetic Button

A "Magnetic Button" subtly pulls toward the user's cursor as they hover near it, creating a highly engaging and physical feel.

While true magnetic buttons that perfectly track the cursor require JavaScript, we can create a convincing CSS-only version using an invisible grid overlay. By placing four transparent div areas over the button (representing Top-Left, Top-Right, Bottom-Left, Bottom-Right), we can use the ~ (general sibling combinator) to shift the button towards whichever quadrant is currently being hovered via transform: translate().

Here is the code to create the CSS-Only Magnetic Button animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

.magnetic-wrap {
    position: relative;
    width: 200px;
    height: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.m-area {
    width: 100%;
    height: 100%;
    z-index: 2;
}

.magnetic-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #212529;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    pointer-events: none; /* Let the grid areas handle hover */
}

/* 4-Quadrant Hover Logic */
.m-area:nth-child(1):hover ~ .magnetic-btn { transform: translate(-60%, -60%); } /* Top Left */
.m-area:nth-child(2):hover ~ .magnetic-btn { transform: translate(-40%, -60%); } /* Top Right */
.m-area:nth-child(3):hover ~ .magnetic-btn { transform: translate(-60%, -40%); } /* Bottom Left */
.m-area:nth-child(4):hover ~ .magnetic-btn { transform: translate(-40%, -40%); } /* Bottom Right */

/* Hover directly in the center is handled as the btn is under the grid corners, but we can add a general hover state if it enters the container */
.magnetic-wrap:hover .magnetic-btn {
    background-color: #343a40;
}

@media (prefers-reduced-motion: reduce) {
    .magnetic-btn {
        transition: none;
    }
    .m-area:hover ~ .magnetic-btn {
        transform: translate(-50%, -50%); /* Disable pull */
    }
}
</style>

<div class="magnetic-wrap">
    <div class="m-area"></div>
    <div class="m-area"></div>
    <div class="m-area"></div>
    <div class="m-area"></div>
    <button class="magnetic-btn">Hover Me</button>
</div>

View Output

Accessibility Considerations

As this movement is unexpected, it may be disorienting or annoying to some users. It's best practice to use the prefers-reduced-motion media query to detect if a user has configured their system to minimize non-essential motion.

Here we create a static, predictable experience for these users by completely disabling the transform translation.


@media (prefers-reduced-motion: reduce) {
    .magnetic-btn {
        transition: none;
    }
    .m-area:hover ~ .magnetic-btn {
        transform: translate(-50%, -50%); /* Keep centered */
    }
}