export function CrystallineButton() {
  return (
    <div
      className="p-12 grid place-items-center"
      style={{
        background:
          "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)",
      }}
    >
      <style>{`
        .crystal-btn {
          background:
            linear-gradient(135deg,
              rgba(186,230,253,0.95) 0%,
              rgba(125,211,252,0.7) 25%,
              rgba(56,189,248,0.55) 55%,
              rgba(14,165,233,0.8) 100%),
            linear-gradient(45deg,
              rgba(255,255,255,0.2),
              rgba(255,255,255,0));
          position: relative;
          overflow: hidden;
          color: #06223a;
          text-shadow: 0 1px 0 rgba(255,255,255,0.4);
          box-shadow:
            inset 0 2px 2px rgba(255,255,255,0.7),
            inset 0 -1px 2px rgba(0,40,80,0.35),
            inset 0 0 0 1px rgba(255,255,255,0.4),
            0 14px 28px -10px rgba(2,132,199,0.55);
          transition: transform .3s ease, box-shadow .3s ease;
        }
        .crystal-btn::before,
        .crystal-btn::after {
          content: "";
          position: absolute;
          inset: 0;
          pointer-events: none;
        }
        .crystal-btn::before {
          background:
            linear-gradient(60deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
          mix-blend-mode: screen;
          transform: translateX(-30%);
          transition: transform .6s ease;
        }
        .crystal-btn::after {
          background:
            linear-gradient(-25deg, transparent 60%, rgba(255,255,255,0.3) 80%, transparent 100%);
        }
        .crystal-btn:hover::before { transform: translateX(40%); }
        .crystal-btn:hover { transform: translateY(-2px) scale(1.02); }
        .crystal-btn:active { transform: scale(.97); }
      `}</style>
      <button
        type="button"
        className="crystal-btn px-8 py-3.5 rounded-xl text-[14px] font-semibold"
      >
        Cleanse cache
      </button>
    </div>
  );
}
Crystalline Button
