Magnetic Button

rohitwushu
Jan 12, 2026 5
Live Preview

Live Editor

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magnetic Button Effect</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;
	700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;
	600&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<button class="magnetic-button">
<span>Hover Me</span>
</button>
</div>

</body>
</html>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}
body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #1a1a1a;
	
}
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.magnetic-button {
	position: relative;
	padding: 25px 50px;
	background: linear-gradient(45deg, #ff3366, #ff6b6b, #ff9966);
	border: none;
	border-radius: 9999px;
	cursor: pointer;
	font-family: "Quicksand", sans-serif;
	font-size: 24px;
	color: white;
	font-weight: 700;
	letter-spacing: 1.5px;
	transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s;
	box-shadow: 0 4px 15px rgba(255, 51, 102, 0.3);
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
	
}
.magnetic-button:hover {
	box-shadow: 0 8px 25px rgba(255, 51, 102, 0.5);
	
}
.magnetic-button span {
	display: inline-block;
	z-index: 1;
	
}
const magnetism = 0.5;
	let currentX = 0;
	let currentY = 0;
	let velocityX = 0;
	let velocityY = 0;
	let animationFrame = null;
	function updateButtonPosition() {
	button.style.transform = `translate($ {
	currentX 
}
px, $ {
	currentY 
}
px)`;
	
}
function animate() {
	velocityX *= dampening;
	velocityY *= dampening;
	currentX += velocityX;
	currentY += velocityY;
	const distance = Math.sqrt(currentX * currentX + currentY * currentY);
	if (Math.abs(distance) < 0.01 && Math.abs(velocityX) < 0.01 && Math.abs(velocityY) < 0.01) {
	currentX = 0;
	currentY = 0;
	velocityX = 0;
	velocityY = 0;
	updateButtonPosition();
	cancelAnimationFrame(animationFrame);
	return;
	
}
// Spring force towards origin const springForceX = -currentX * springStrength;
	const springForceY = -currentY * springStrength;
	velocityX += springForceX;
	velocityY += springForceY;
	updateButtonPosition();
	animationFrame = requestAnimationFrame(animate);
	
}
button.addEventListener('mousemove', e => {
	cancelAnimationFrame(animationFrame);
	const rect = button.getBoundingClientRect();
	currentX = e.clientX - rect.left - rect.width / 2;
	currentY = e.clientY - rect.top - rect.height / 2;
	// Apply magnetism currentX *= magnetism;
	currentY *= magnetism;
	velocityX = 0;
	velocityY = 0;
	updateButtonPosition();
	
}
);
	button.addEventListener('mouseleave', e => {
	const rect = button.getBoundingClientRect();
	const exitX = e.clientX - rect.left - rect.width / 2;
	const exitY = e.clientY - rect.top - rect.height / 2;
	// Set initial velocity in the opposite direction of exit velocityX = -exitX * magnetism * elasticity;
	velocityY = -exitY * magnetism * elasticity;
	animate();
	
}
);
	
}
);
	
Categories

Magnetic Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
