<button>change dot</button>
<div></div>

/* blue dot */
div {
  position: absolute;
  top: 50px;
  left: 50px; 
  width: 100px;
  height: 100px;
  background: rgba(30,50,80,1);
  border-radius: 50% 50%;
  transition: 500ms;
}
/* pink dot */
div.other {
  position: absolute;
  top: 200px;
  left: 500px; 
  width: 60px;
  height: 60px;
  background: rgba(230,50,80,1);
  border-radius: 50% 50%;
  transition: 500ms;
}

document.querySelector('button').addEventListener('click', (ev) => {
  document.querySelector('div').classList.toggle('other');
});