Well, there are a bunch of different ways to achieve this. When I first got this on my hands, I went straight to the amazing Irina Zaman for help, she had done the very same thing for the incredible Lucie Van Baaren's portfolio just some weeks back. Pretty straight-forward a button with a dashed border that is static until you hover on it and then it starts moving.

I'm still kinda grasping everything around the new Variables feat from Webflow, so when she explained I wasn't very sure I'd be able to replicate it, but once I tried it wasn't that bad. The approach is basically that you have an SVG for the dashed border and an absolute positioned button link. Then you set a variable for the stroke dash offset and control that from the interactions panel - which we can do now thanks to the variables!

I replicated this, and it worked as a charm. But then, the client asked for it to be backwards! they wanted the button to be initially spinning infinitely and then to stop on hover. I went for Irinia again, and she very easily managed to get the thing looping endlessly, but we couldn't figure out a good way to make it stop on hover. After some hours of going nowhere, I decided to start from scratch and look for a different approach. So I turned to GSAP, I'm no good at writing code so I figured this was a task for my old friend Slater App.
‍

This is what I did:

1. Used the same structure for the button:

<script>
const buttonContainers = document.querySelectorAll(".button-wrapper");
buttonContainers.forEach((buttonContainer) => {
  const buttons = buttonContainer.querySelectorAll(".button-svg");
  const animation = gsap.to(buttons, {
    strokeDashoffset: -620,
    repeat: -1,
    ease: "none",
    duration: 5
  });
  buttonContainer.addEventListener("mouseenter", () => {
    animation.pause();
  });
  buttonContainer.addEventListener("mouseleave", () => {
    animation.play();
  });
});
</script>

That's pretty much it! I have to say I so far love the GSAP + Slater App + Webflow combo.