JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button" >
  <text class="text"> Save </text>
</div>

CSS

.button {
  background-color: transparent;
  border: 1px solid;
  border-color: black;
  border-radius: 6px;
  color: black;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  margin-top: 8px;
  outline-style: none;
  padding: 6px 10px;
  text-align: center;
  transition: max-width 2s cubic-bezier(0.23, 1, 0.32, 1);
  width: auto;
max-width: 2em;
}

.button-depressed {
max-width:4em;
  color: white;
  background-color: #ADD8E6;
  border-color: transparent;
}

JavaScript

var isSaved = false

function doSaveAnimation() {
  var button = document.getElementsByClassName("button")[0];
  button.classList.add("button-depressed");
  setTimeout(function() {
    button.innerHTML = "Unsave";
  }, 80);
}

function doUnsaveAnimation() {
  var button = document.getElementsByClassName("button")[0];
  button.classList.remove("button-depressed");
  setTimeout(function() {
    button.innerHTML = "Save";
  }, 80);
}

function animate(){
	if (isSaved) {
  	doUnsaveAnimation();
  } else {
  	doSaveAnimation();
  }
  isSaved = !isSaved;
}

document.getElementsByClassName("button")[0].addEventListener("click", animate);