export function ShimmerBorderButton() {
  return (
    <div className="bg-[#0b0b10] p-12 grid place-items-center">
      <style>{`
        @keyframes shimmer-rotate { to { --angle: 360deg; } }
        @property --angle {
          syntax: "<angle>";
          inherits: false;
          initial-value: 0deg;
        }
        .shimmer-btn {
          position: relative;
          background: #0e0e14;
          border-radius: 12px;
          padding: 2px;
          isolation: isolate;
          transition: transform .25s ease;
        }
        .shimmer-btn::before {
          content: "";
          position: absolute;
          inset: 0;
          padding: 1.5px;
          border-radius: 12px;
          background: conic-gradient(
            from var(--angle),
            transparent 0deg,
            #38bdf8 60deg,
            #a78bfa 120deg,
            transparent 180deg,
            transparent 360deg
          );
          -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
                  mask-composite: exclude;
          animation: shimmer-rotate 3s linear infinite;
          z-index: -1;
        }
        .shimmer-btn:hover { transform: scale(1.03); }
        .shimmer-btn:hover::before { animation-duration: 1.2s; }
        .shimmer-btn:active { transform: scale(.97); }
      `}</style>
      <button type="button" className="shimmer-btn">
        <span
          className="block px-7 py-3 rounded-[10px] text-[14px] font-medium text-white"
          style={{
            background: "#0e0e14",
            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
          }}
        >
          Subscribe now
        </span>
      </button>
    </div>
  );
}
Shimmer Border Button
