Spotlight Button

A gradient border button where the highlight follows cursor movement.

"use client";

import { useState } from "react";

export default function SpotlightButton() {
  const [position, setPosition] = useState(null);
  const config = {
    label: "Hover me",
    bgColor: "#0a0d14",
    textColor: "#dbeafe",
    borderColor: "#334155",
    spotlightColor: "#60a5fa",
    radius: 999,
    spotlightSize: 140
  };

  return (
    <div
      onPointerLeave={() => setPosition(null)}
      onPointerMove={(event) => {
        const rect = event.currentTarget.getBoundingClientRect();
        setPosition({ x: event.clientX - rect.left, y: event.clientY - rect.top });
      }}
      style={{
        position: "relative",
        borderRadius: config.radius,
        padding: 1.5,
        cursor: "pointer",
        background: position
          ? `radial-gradient(${config.spotlightSize}px circle at ${position.x}px ${position.y}px, ${config.spotlightColor}, ${config.borderColor} 70%)`
          : config.borderColor,
        transition: "background 150ms ease"
      }}
    >
      <div
        style={{
          padding: "10px 24px",
          borderRadius: Math.max(config.radius - 1, 0),
          background: config.bgColor,
          color: config.textColor,
          fontSize: 14,
          fontWeight: 600,
          textAlign: "center"
        }}
      >
        {config.label}
      </div>
    </div>
  );
}

Effect guide

Copy the spotlight button effect

What it is: A gradient border button where the highlight follows cursor movement.

Where to use it: Use this motion pattern for calls to action, sign-up flows, command buttons, and compact product moments.

Supported formats: React, Vue, Vanilla JS, CSS.

Get motion drops

New UI effects, code snippets, and GrabMotion updates by email.