JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<button id="button">Click here</button>

CSS

button {
  padding: 0.5rem 1rem;
  background-color: red;
  color: white;
  border: 0;
}

@keyframes toggle {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

.blue {
  animation: toggle 2s alternate forwards ease-in-out;
}

.red {
  animation: toggle 2s -0.1s alternate forwards reverse ease-in-out;
}

JavaScript

var state;

button.addEventListener('click', () => {
	if (state) {
  	button.classList.remove(state);
  }
  state = state !== 'blue' ? 'blue' : 'red';
  button.classList.add(state);
});