Mouse-Reactive Iridescent Button

This is a Mouse-Reactive Iridescent Button. It uses a sophisticated layering of CSS conic gradients and JavaScript pointer tracking to create a button with a vibrant, shimmering border that physically follows the user’s cursor. Its function is to provide a high-end, tactile micro-interaction that makes a standard call-to-action feel like a premium, light-sensitive object.

Specs

• Weight: ~3 KB. No external libraries.
• Performance: High. The mouse tracking logic is lightweight and only updates CSS custom properties. The complex gradient rendering is handled efficiently by the browser’s CSS engine.
• Theming / Customization: Includes distinct light and dark mode variants via a data-theme attribute. The iridescent colors use the modern display-p3 color space for wider gamut support, with a fallback to standard hsl.
• Responsiveness: Inherently responsive. Uses relative em units for sizing.
• Web APIs: Pointer Events API.
• Graceful Degradation: [!] Relies on @property to animate custom properties. In older browsers without support, the hover state will snap instantly without a smooth transition, but the button remains fully functional.

Anatomy

The component uses a “pseudo-element proxy” architecture to create the multi-layered glow.

• HTML (The Skeleton): A standard <button> with a nested .inner div for the main content.
• CSS (The Skin): The core of the effect. A conic-gradient is applied to the button’s background, its pseudo-elements (::before, ::after), and the inner div to create the stacked color and shadow effects. color-mix() is not used here, but color(display-p3 ...) provides enhanced color vibrancy.
• JS (The Nervous System): A minimalist script. It attaches a pointermove event listener to each button, calculates the cursor’s coordinates relative to the button’s center, and injects these values into the --coord-x and --coord-y CSS variables.

Logic

The standout technical feature is the “Cursor-Driven Gradient Transformation”. This is the Glyph-logic of the snippet:

button.addEventListener("pointermove", (event) => {
  const { x, y } = getCursorPosition(event.target, event);
  button.style.setProperty("--coord-x", x);
  button.style.setProperty("--coord-y", y);
});

button::after {
  transform: translate(
    calc(calc(var(--coord-x)/1.5) * 1px), 
    calc(calc(var(--coord-y)/1.5) * -1px)
  );
}

Instead of a static hover effect, this component creates a dynamic link between the physical cursor and the visual output. The JavaScript continuously updates the --coord-x and --coord-y variables. The ::after pseudo-element, which is a blurred, saturated copy of the iridescent gradient, is then translated based on these variables. This makes the soft glow appear to be “pushed” around by the cursor, creating a realistic illusion of a light source interacting with a physical, refractive surface.

Feel

Luxurious and responsive. The button feels like a polished, solid object with internal light. The way the iridescent glow moves in sync with the cursor provides a deeply satisfying sense of direct manipulation. The subtle animation of the box-shadow on hover makes the button feel like it’s lifting off the page to meet the user’s pointer.