<button id='submit-btn'>

  <span class='text'>Click Me</span>

  <span class='icon'>✔</span>

</button>

* {

  box-sizing: border-box;

}

​

body {

  padding: 60px;

  display: flex;

  justify-content: center;

} 

​

button {

  font-size: 40px;

  height: 100px;

  width: 250px;

  border: 2px solid black;

  background-color: white;

  cursor: pointer;

  transition: border-color 800ms, background-color 800ms, width 800ms, border-radius 800ms;

  position: relative;

}

​

button .text,

button .icon {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}

​

button .icon {

  opacity: 0;

  transition: transform 800ms;

  transform: scale(0);

}

​

button:hover {

  background-color: #ddd;

  border-color: transparent;

}

​

button.active .text {

  visibility: hidden;

}

​

button.active {

  border-radius: 50%;

  width: 100px;

  border-color: #50C878;

  background-color: #50C878;

}

​

button.active .icon {

  color: white;

  transform: scale(1);

  opacity: 1;

}

const submitBtn = document.getElementById('submit-btn')

​

submitBtn.addEventListener('click', () => {

  submitBtn.classList.toggle('active')

})