MagneticButton

magneticbutton-1779388705553.tsx

'use client';
import { useState, useRef } from 'react';

export default function MagneticButton({ label = "Get Started", onClick }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const [hovered, setHovered] = useState(false);
  const ref = useRef(null);

  const handleMouseMove = (e) => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    const dx = e.clientX - cx;
    const dy = e.clientY - cy;
    setPos({ x: dx * 0.3, y: dy * 0.3 });
  };

  const handleMouseLeave = () => {
    setPos({ x: 0, y: 0 });
    setHovered(false);
  };

  return (
    <button
      ref={ref}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={handleMouseLeave}
      onClick={onClick}
      style={{
        transform: `translate(${pos.x}px, ${pos.y}px)`,
        transition: hovered ? 'transform 0.1s ease' : 'transform 0.4s ease',
        background: hovered
          ? 'linear-gradient(135deg, #C9A84C, #e8c96d)'
          : 'linear-gradient(135deg, #a8873a, #C9A84C)',
        border: 'none',
        borderRadius: '50px',
        padding: '14px 36px',
        color: '#0A0A0A',
        fontWeight: 700,
        fontSize: '15px',
        cursor: 'pointer',
        boxShadow: hovered
          ? '0 8px 30px rgba(201,168,76,0.5)'
          : '0 4px 16px rgba(201,168,76,0.25)',
        letterSpacing: '0.02em',
        fontFamily: 'system-ui, sans-serif',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <span style={{ position: 'relative', zIndex: 1 }}>{label}</span>
      {hovered && (
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(circle at center, rgba(255,255,255,0.2), transparent 70%)',
          pointerEvents: 'none',
        }} />
      )}
    </button>
  );
}

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Button with magnetic cursor attraction effect

More from Buttons

import { motion, useMotionValue, useSpring } from 'framer-motion';
import React from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
  className?: string;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children, cl

MagneticButton

Buttons

'use client';

import React, { useState, useEffect } from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children }) => {
  const [x, setX] = useState(0);
  const [y,

MagneticButton

Buttons

'use client';

import { useState } from 'react';

interface GlowButtonProps {
  children: React.ReactNode;
}

const GlowButton: React.FC<GlowButtonProps> = ({ children }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseE

GlowButton

Buttons

import React from 'react';
import { motion } from 'framer-motion';

interface LiquidButtonProps {
  children: React.ReactNode;
}

const LiquidButton: React.FC<LiquidButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{

LiquidButton

Buttons