CTA Button with Right-Arrow SVG Icon

<div
  class="group flex flex-1 gap-2 text-[13px] hover:text-white transition font-medium text-neutral-300 pt-5 pr-6 pb-5 pl-6 items-center justify-center">
  <style>
    .bookmarkBtn {
      width: auto;
      min-width: 120px;
      height: 40px;
      border-radius: 40px;
      border: 1px solid rgba(96, 165, 250, 0.4);
      background-color: rgb(12, 12, 12);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      cursor: pointer;
      transition-duration: 0.3s;
      overflow: hidden;
      padding: 0;
      position: relative;
    }

    .IconContainer {
      width: 30px;
      height: 30px;
      background: linear-gradient(to bottom, rgb(96, 165, 250), rgb(59, 130, 246));
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      z-index: 2;
      transition-duration: 0.3s;
      flex-shrink: 0;
      margin-left: 5px;
      position: relative;
    }

    .icon {
      border-radius: 1px;
      transition-duration: 0.3s;
    }

    .text {
      height: 100%;
      width: auto;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      z-index: 1;
      transition-duration: 0.3s;
      font-size: 0.9em;
      margin: 0;
      margin-left: 8px;
      margin-right: 8px;
      opacity: 1;
      transform: translateX(0);
    }

    .bookmarkBtn:hover .IconContainer {
      width: calc(100% - 10px);
      border-radius: 35px;
      margin-left: 5px;
      transition-duration: 0.3s;
    }

    .bookmarkBtn:hover .text {
      opacity: 0;
      transform: translateX(30px);
      transition-duration: 0.3s;
    }

    .bookmarkBtn:active {
      transform: scale(0.95);
      transition-duration: 0.3s;
    }
  </style>
  <button class="bookmarkBtn">
    <span class="IconContainer">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
    </span>
    <p class="text">Start project</p>
  </button>
</div>