How do I make a rainbow button using Vanilla Javascript Client

So, I'm making a panel for a project.. and I'd like to make a javascript version of a rainbow button, not gradient, it would smoothly change colors, like a rainbow LED light.

For example, we have a variable named "set"
If set equals true, then the button is rainbow. Otherwise, its normal.

I've been trying everything and have no luck with any code working.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let rainbowButton = document.getElementById("rainbow-button");

function toggleLight() {
  if (rainbowButton.classList.contains("rainbow-light"))
    rainbowButton.classList.remove("rainbow-light")
  else
    rainbowButton.classList.add("rainbow-light")
}

<!-- language: lang-css -->

#rainbow-button {
  border: none;
  border-radius: 8px;
  background-color: gray;
  padding: 8px;
}

.rainbow-light {
  animation: rainbow-animation 2.5s linear;
  animation-iteration-count: infinite;
}

@keyframes rainbow-animation {
  100%, 0% {
    background-color: rgb(255, 0, 0);
  }
  8% {
    background-color: rgb(255, 127, 0);
  }
  16% {
    background-color: rgb(255, 255, 0);
  }
  25% {
    background-color: rgb(127, 255, 0);
  }
  33% {
    background-color: rgb(0, 255, 0);
  }
  41% {
    background-color: rgb(0, 255, 127);
  }
  50% {
    background-color: rgb(0, 255, 255);
  }
  58% {
    background-color: rgb(0, 127, 255);
  }
  66% {
    background-color: rgb(0, 0, 255);
  }
  75% {
    background-color: rgb(127, 0, 255);
  }
  83% {
    background-color: rgb(255, 0, 255);
  }
  91% {
    background-color: rgb(255, 0, 127);
  }
}

<!-- language: lang-html -->

<input id="rainbow-button" type="button" onclick="toggleLight()" value="Rainbow button">

<!-- end snippet -->

You don't really need JS for this. This type of light can be done using CSS animations. If you want to control when the light is on/off you can just add/remove CSS class of your button.