<style>
  @keyframes fadeToTransparent {
    to {
      opacity: 0;
    }
  }
  @keyframes fromCenter {
    from {
      transform: translate(0px, 0px);
    }
  }
  
  .particle {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    pointer-events: none;
    animation:
      fadeToTransparent var(--fade-duration) forwards,
      fromCenter 500ms;
  }
  
</style>

<button class="particleButton">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    aria-hidden="true"
  >
    <path
      d="M3.68546 5.43796C8.61936 1.29159 11.8685 7.4309 12.0406 7.4309C12.2126 7.43091 15.4617 1.29159 20.3956 5.43796C26.8941 10.8991 13.5 21.8215 12.0406 21.8215C10.5811 21.8215 -2.81297 10.8991 3.68546 5.43796Z"
      stroke="white"
      stroke-width="2"
      stroke-linecap="round"
    />
  </svg>
  <span class="visually-hidden">Like this post</span>
</button>