What's New Glow Button

1"use client";2
3import type { PointerEvent as ReactPointerEvent } from "react";4import { ArrowRight } from "lucide-react";5
6export function WhatsNewGlowButton() {7  const updateGlow = (event: ReactPointerEvent<HTMLButtonElement>) => {8    const bounds = event.currentTarget.getBoundingClientRect();9    const position = Math.max(0, Math.min(100, ((event.clientX - bounds.left) / bounds.width) * 100));10    event.currentTarget.style.setProperty("--glow-x", `${position}%`);11  };12  const resetGlow = (event: ReactPointerEvent<HTMLButtonElement>) => {13    event.currentTarget.style.setProperty("--glow-x", "50%");14  };15
16  return (17    <button type="button" className="whats-new-button" onPointerMove={updateGlow} onPointerLeave={resetGlow}>18      <span className="whats-new-content">19        <ArrowRight size={16} strokeWidth={2.5} />20        {"What's new"}21      </span>22      <span className="whats-new-glow whats-new-glow-orange" aria-hidden="true" />23      <span className="whats-new-glow whats-new-glow-blue" aria-hidden="true" />24    </button>25  );26}

1.whats-new-button {2  --glow-x: 50%;3  position: relative;4  display: inline-flex;5  align-items: center;6  justify-content: center;7  min-height: 42px;8  overflow: hidden;9  border: 1px solid light-dark(#cbd2dc,#36383d);10  border-radius: 999px;11  background: light-dark(#f6f7f9,#0e0e10);12  padding: 0 18px;13  color: light-dark(#14181e,#f0f0f0);14  font-size: 16px;15  font-weight: 500;16}17.whats-new-content {18  position: relative;19  z-index: 1;20  display: inline-flex;21  align-items: center;22  gap: 9px;23}24.whats-new-glow {25  position: absolute;26  bottom: -108%;27  width: 112%;28  height: 180%;29  border-radius: 999px;30  filter: blur(23px);31  opacity: .28;32  transition: left .22s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;33}34.whats-new-glow-orange {35  left: calc(var(--glow-x) - 78%);36  background: linear-gradient(145deg, #ffbe91, #f97316 43%, #7a2808);37}38.whats-new-glow-blue {39  left: calc(var(--glow-x) - 30%);40  background: linear-gradient(145deg, #77e1e6, #2187d7 45%, #192b8a);41}42.whats-new-button:hover .whats-new-glow, .whats-new-button:focus-visible .whats-new-glow {43  transform: translateY(-19px);44  opacity: 1;45}46.whats-new-button:focus-visible {47  outline: 2px solid #f97316;48  outline-offset: 3px;49}