Why this works

By resetting default styles and layering a moving gradient under a transparent button, we achieve a vibrant animated border effect that grabs user attention even in Bootstrap-based sites.

Source Code

<button style="all: unset; position: relative; display: inline-block; background: transparent; border: 2px solid transparent; padding: 0.75rem 2rem; border-radius: 50px; font-weight: bold; overflow: hidden; cursor: pointer;">
  <span style="position: relative; z-index: 2;">Hover Me</span>
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ADEDE, #4ADE80); background-size: 800% 800%; border-radius: 50px; z-index: 1; opacity: 0; transition: opacity 0.3s ease;"></div>
</button>

<style>
button:hover div {
  opacity: 1;
  animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>