Magnetic Buttons

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

From our sponsor: Jamf Now sets up and secures your team's Apple devices so you can get back to more creative work.

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.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.