Magnetic Buttons

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

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.

Browse amazing websites

πŸ’Žβœ¨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.