Glass Morphism Button

<!-- Button Container -->
<div class="button-wrap relative z-10 rounded-full bg-transparent pointer-events-none"
style="animation: fadeIn 1s ease-out 0.3s both;">
  <!-- Button -->
  <button class="glass-button all-unset cursor-pointer relative rounded-full pointer-events-auto z-30 outline-none focus:outline-none">
          <span class="button-text relative block select-none font-medium text-base text-neutral-800 tracking-tight px-6 py-3.5" style="font-size: 17px;">
              Sign up
          </span>
          <!-- Shine Effect -->
          <div class="button-shine"></div>
      </button>
  <style>
    @property --angle-1 {
      syntax: "<angle>";
      inherits: false;
      initial-value: -75deg;
    }

    @property --angle-2 {
      syntax: "<angle>";
      inherits: false;
      initial-value: -45deg;
    }

    body {
      font-family: 'Inter', sans-serif;
      font-size: clamp(2rem, 4vw, 5rem);
    }

    .button-wrap {
      transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    .glass-button {
      background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
      box-shadow:
        inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
        inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
        0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
        0 0 0.1em 0.25em rgba(255, 255, 255, 0.2) inset,
        0 0 0 0 rgba(255, 255, 255, 1);
      backdrop-filter: blur(clamp(1px, 0.125em, 4px));
      transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    .glass-button:hover {
      transform: scale(0.975);
      backdrop-filter: blur(0.01em);
      box-shadow:
        inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
        inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
        0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
        0 0 0.05em 0.1em rgba(255, 255, 255, 0.5) inset,
        0 0 0 0 rgba(255, 255, 255, 1);
    }

    .glass-button:active {
      transform: scale(0.95) rotate3d(1, 0, 0, 25deg);
      box-shadow:
        inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
        inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
        0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
        0 0 0.1em 0.25em rgba(255, 255, 255, 0.2) inset,
        0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
        0 0.25em 0 0 rgba(255, 255, 255, 0.75),
        inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
    }

    .button-text {
      text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
      transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    .glass-button:hover .button-text {
      text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);
    }

    .glass-button:active .button-text {
      text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
    }

    .button-shadow {
      filter: blur(clamp(2px, 0.125em, 12px));
      transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    .button-shadow::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
      width: calc(100% - 2em);
      height: calc(100% - 2em);
      top: -0.5em;
      left: -0.875em;
      padding: 0.125em;
      box-sizing: border-box;
      opacity: 1;
      transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    .glass-button:hover+.button-shadow {
      filter: blur(clamp(2px, 0.0625em, 6px));
    }

    .glass-button:hover+.button-shadow::after {
      top: -0.875em;
      opacity: 1;
    }

    .glass-button:active+.button-shadow {
      filter: blur(clamp(2px, 0.125em, 12px));
    }

    .glass-button:active+.button-shadow::after {
      top: -0.5em;
      opacity: 0.75;
    }

    .glass-button::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 999px;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      top: -1px;
      left: -1px;
      padding: 1px;
      box-sizing: border-box;
      background:
        conic-gradient(from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1), --angle-1 500ms ease;
      box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
    }

    .glass-button:hover::after {
      --angle-1: -125deg;
    }

    .glass-button:active::after {
      --angle-1: -75deg;
    }

    .button-shine {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      width: calc(100% - 1px);
      height: calc(100% - 1px);
      top: 0.5px;
      left: 0.5px;
      background: linear-gradient(var(--angle-2), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 40% 50%, rgba(255, 255, 255, 0) 55%);
      mix-blend-mode: screen;
      pointer-events: none;
      background-size: 200% 200%;
      background-position: 0% 50%;
      background-repeat: no-repeat;
      transition: background-position 500ms cubic-bezier(0.25, 1, 0.5, 1), --angle-2 500ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    .glass-button:hover .button-shine {
      background-position: 25% 50%;
    }

    .glass-button:active .button-shine {
      background-position: 50% 15%;
      --angle-2: -15deg;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  </style>
</div>