main{
 display: flex;
  align-items:center;
  justify-content:center;
  padding-top:3rem;
}

.colored_button {
  border-radius: 5px;
  width: max-content;
  height: 3rem;
  color: white;
  font-size: 2rem;
  background-color: red;
  cursor: pointer;
}

const button = document.querySelector(".colored_button");

let current = true;

button.addEventListener("click", function (e) {
  if (current) {
    button.textContent = "I'm colored blue";
    button.style.backgroundColor = "blue";
    current = !current;
  } else {
    button.textContent = "I'm colored red";
    button.style.backgroundColor = "red";
    current = !current;
  }
});