Magnetic Buttons

A small set of magnetic buttons with some fun hover animations.

By Manoela Ilic in Playground on
Demo Code

It has been a long time since we explored some button styles here on Codrops! But after seeing a really nice one on Cuberto, I wanted to explore some ideas and share them with you.

The main idea of these buttons is that they are magnetic and follow the mouse pointer. Along with that, there’s lots of room to play with some interesting hover animations. A very nice thing to explore is the motion of an additional element like a shadow or another line. The parallax effect created by moving the button’s elements differently, gives a nice twist to the animation.

Here we play with a border animation.
This circular button fills with a solid color.
A shadow element creates some depth.

I really hope you like them! Can’t wait to see your ideas 🙂 Share them with us @codrops or @crnacura.

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

button hover magnetic

On-Scroll Revealing WebGL Images

Some On-Scroll Text Highlight Animations

Expanding Rounded Menu Animation

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.