Animated Gradient CTA Button with Floating Particles

<a href="#" class="button hover:from-violet-400 hover:to-indigo-400 shadow-violet-500/25 ring-1 ring-white/10 transition-colors text-sm font-medium text-white rounded-xl shadow-lg" style="--h-button: 48px; --w-button: 102px; --round: 0.75rem; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.25s ease; background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%), linear-gradient(0deg, #7a5af8, #7a5af8); border-radius: var(--round); border: none; outline: none; padding: 12px 18px;">
  <div class="fold" style="z-index: 1; position: absolute; top: 0; right: 0; height: 1rem; width: 1rem; display: inline-block; transition: all 0.5s ease-in-out; background: radial-gradient(100% 75% at 55%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%); box-shadow: 0 0 3px black; border-bottom-left-radius: 0.5rem; border-top-right-radius: var(--round);"></div>
  <div class="points_wrapper" style="overflow: hidden; width: 100%; height: 100%; pointer-events: none; position: absolute; z-index: 1;">
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s;"></div>
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s;"></div>
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 25%; opacity: 0.8; animation-duration: 2.2s; animation-delay: 0.1s;"></div>
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 44%; opacity: 0.6; animation-duration: 2.05s;"></div>
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 50%; opacity: 1; animation-duration: 1.9s;"></div>
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s;"></div>
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 88%; opacity: 0.9; animation-duration: 2.2s; animation-delay: 0.2s;"></div>
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s;"></div>
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 98%; opacity: 0.6; animation-duration: 2.6s; animation-delay: 0.1s;"></div>
    <div class="point" style="bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px; left: 65%; opacity: 1; animation-duration: 2.5s; animation-delay: 0.2s;"></div>
  </div>
  <div class="inner" style="z-index: 2; gap: 6px; position: relative; width: 100%; color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; line-height: 1.5; transition: color 0.2s ease-in-out;">
    Start a Project
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket icon" style="width: 18px; height: 18px; transition: fill 0.1s linear;"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class=""></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" class=""></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path></svg>
  </div>
  <style>
    .button::before,
    .button::after {
      content: "";
      position: absolute;
      inset: var(--space);
      transition: all 0.5s ease-in-out;
      border-radius: calc(var(--round) - var(--space));
      z-index: 0;
    }
    .button::before {
      --space: 1px;
      background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .button::after {
      --space: 2px;
      background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%), linear-gradient(0deg, #7a5af8, #7a5af8);
    }
    .button:active {
      transform: scale(0.95);
    }
    .fold::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 150%;
      height: 150%;
      transform: rotate(45deg) translateX(0%) translateY(-18px);
      background-color: #e8e8e8;
      pointer-events: none;
    }
    .button:hover .fold {
      margin-top: -1rem;
      margin-right: -1rem;
    }
    @keyframes floating-points {
      0% {
        transform: translateY(0);
      }
      85% {
        opacity: 0;
      }
      100% {
        transform: translateY(-55px);
        opacity: 0;
      }
    }
    .button:focus svg.icon {
      fill: white;
    }
    .button:hover svg.icon {
      fill: transparent;
      animation: dasharray 1s linear forwards, filled 0.1s linear forwards 0.95s;
    }
    @keyframes dasharray {
      from {
        stroke-dasharray: 0 0 0 0;
      }
      to {
        stroke-dasharray: 68 68 0 0;
      }
    }
    @keyframes filled {
      to {
        fill: white;
      }
    }
  </style>
</a>