export function HolographicButton() {
  return (
    <div className="bg-[#08080c] p-12 grid place-items-center">
      <style>{`
        @keyframes holo-spin { to { background-position: 200% 0; } }
        .holo-btn {
          background:
            linear-gradient(#111114, #111114) padding-box,
            linear-gradient(90deg,
              #ff3df5, #4cc9ff, #b0ff5c, #ffd23d,
              #ff3df5, #4cc9ff, #b0ff5c, #ffd23d) border-box;
          background-size: 200% 100%;
          border: 2px solid transparent;
          color: #f4f4ff;
          animation: holo-spin 4s linear infinite;
          transition: transform .25s ease;
          position: relative;
          overflow: hidden;
        }
        .holo-btn::after {
          content: "";
          position: absolute; inset: 0;
          background: linear-gradient(120deg,
            transparent 30%,
            rgba(255,255,255,0.18) 50%,
            transparent 70%);
          transform: translateX(-100%);
          transition: transform .7s ease;
          pointer-events: none;
        }
        .holo-btn:hover::after { transform: translateX(100%); }
        .holo-btn:hover { transform: translateY(-2px); }
        .holo-btn:active { transform: translateY(0) scale(.98); }
      `}</style>
      <button
        type="button"
        className="holo-btn px-7 py-3.5 rounded-full text-[13px] font-semibold uppercase tracking-[0.18em]"
      >
        Mint hologram
      </button>
    </div>
  );
}
Holographic Button
