Want to make your website feel more interactive?

In this tutorial, you’ll learn how to build a smooth magnetic button using only HTML, CSS, and vanilla JavaScript. This modern UI effect makes buttons subtly follow the user’s cursor, creating a premium user experience often seen on high-end landing pages.

In this video you’ll learn:
• How to detect mouse movement over an element
• How to calculate an element’s center position
• How to use CSS transforms for smooth movement
• How to create a realistic magnetic hover effect
• How to make the animation feel natural with CSS transitions

Technologies used:
✓ HTML5
✓ CSS3
✓ Vanilla JavaScript

If you enjoyed this tutorial, don’t forget to Like, Subscribe, and turn on notifications for more JavaScript UI effects, mini projects, and frontend development tutorials every week.

#javascript #webdevelopment #frontend #html #css #coding #programming