Glowing Call-to-Action Button with Icon

<div class="dx-component-wrapper">
  <style>
    .dx-component-wrapper {
      /* Wrapper Variable  Scope  */
      --dx-accent: #FF3700;
      --dx-white: #FFFFFF;
      --dx-black: #000000;

      /* Shadow Architecture */
      --dx-btn-shadow:
        0.56px 0.56px 1.76px rgba(0, 0, 0, 0.18),
        1.45px 1.45px 4.5px rgba(0, 0, 0, 0.18),
        2.9px 2.9px 9px rgba(0, 0, 0, 0.18),
        5.5px 5.5px 17px rgba(0, 0, 0, 0.18),
        11px 11px 34px rgba(0, 0, 0, 0.18),
        24px 24px 74.6px rgba(0, 0, 0, 0.18),
        inset 0px -16px 48px 0px rgba(0, 0, 0, 1);

      /*  Glow Effect*/
      --dx-glow: 0 0 0 4px rgba(255, 255, 255, 0.15);
      --dx-glow-hover: 0 0 0 8px rgba(255, 255, 255, 0.25);
    }

    .dx-sig-btn {
      all: unset;
      /* Default styling reset */
      display: inline-flex;
      align-items: center;
      gap: 16px;
      padding: 12px 32px;
      background-color: var(--dx-black);
      color: var(--dx-white);
      border-radius: 9999px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      box-shadow: var(--dx-btn-shadow), var(--dx-glow);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dx-sig-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--dx-btn-shadow), var(--dx-glow-hover);
      border-color: var(--dx-accent);
    }

    /* Logo Styling */
    .dx-logo-box {
      width: 36px;
      height: 36px;
      background-color: var(--dx-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.4s ease;
    }

    .dx-sig-btn:hover .dx-logo-box {
      transform: scale(1.1) rotate(-5deg);
    }

    .dx-arrow {
      transition: transform 0.3s ease;
      opacity: 0.6;
    }

    .dx-sig-btn:hover .dx-arrow {
      transform: translateX(4px);
      opacity: 1;
    }
  </style>

  <button class="dx-sig-btn">
    <div class="dx-logo-box">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 4H11C15.4183 4 19 7.58172 19 12C19 16.4183 15.4183 20 11 20H5V4Z" fill="black"/>
        <path d="M12 9.5L12.7 11.3L14.5 12L12.7 12.7L12 14.5L11.3 12.7L9.5 12L11.3 11.3L12 9.5Z" fill="white"/>
      </svg>
    </div>

    <span style="font-size: 16px; letter-spacing: -0.02em;">Book a Meeting</span>

    <svg class="dx-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  </button>
</div>