ButtonsShimmer

Sheen Button

A refined button shimmer that sweeps light across the surface on hover.

"use client";

import { useRef } from "react";

export default function SheenButton() {
  const sheenRef = useRef(null);
  const config = {
    label: "Hover me",
    variant: "solid",
    bgColor: "#3b82f6",
    textColor: "#ffffff",
    borderColor: "#60a5fa",
    sheenColor: "#ffffff",
    radius: 999,
    duration: 650,
    sheenOpacity: 0.22
  };

function triggerSheen() {
    const sheen = sheenRef.current;
    if (!sheen) return;

sheen.animate(
      [
        { transform: "translateX(-150%) skewX(-20deg)" },
        { transform: "translateX(330%) skewX(-20deg)" }
      ],
      {
        duration: config.duration,
        easing: "cubic-bezier(0.22, 1, 0.36, 1)",
        fill: "forwards"
      }
    );
  }

return (
    <button
      onPointerEnter={triggerSheen}
      style={{
        position: "relative",
        overflow: "hidden",
        padding: "11px 26px",
        borderRadius: config.radius,
        fontSize: 14,
        fontWeight: 600,
        cursor: "pointer",
        background: config.variant === "solid" ? config.bgColor : "transparent",
        border: config.variant === "outline" ? `1px solid ${config.borderColor}` : "1px solid transparent",
        color: config.textColor
      }}
    >
      <span style={{ position: "relative", zIndex: 1 }}>{config.label}</span>
      <span
        ref={sheenRef}
        style={{
          position: "absolute",
          top: "-60%",
          left: "-120%",
          width: "60%",
          height: "220%",
          background: `linear-gradient(100deg, transparent 20%, color-mix(in srgb, ${config.sheenColor} ${Math.round(config.sheenOpacity * 100)}%, transparent) 50%, transparent 80%)`,
          transform: "translateX(-150%) skewX(-20deg)",
          pointerEvents: "none"
        }}
      />
    </button>
  );
}