<button class="button">
  <span class="button__text">Bubububu && Button</span>
  <span class="button__icon"></span>
</button>

body {
  background: #fff;
  padding: 40px;
}

.button {
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  padding: 10px 40px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1em;
  position: relative;
  background-color: crimson;
  display: flex;
  justify-content: center;
  align-items: center;
  --icon-opacity: 0;
  --icon-visibility: hidden;
  --text-transform: none;
}

.button__text {
  display: inline-flex;
  transition: transform 0.35s ease-in-out;
  transform: var(--text-transform);
}

.button__icon {
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
  right: 15px;
  position: absolute;
  opacity: var(--icon-opacity);
  visibility: var(--icon-visibility);
  transition-duration: 0.2s;
  background: #fff;
  border-radius: 50%;
  height: 30px;
  display: inline-flex;
  width: 30px;
}

.button__active {
  --icon-opacity: 1;
  --text-transform: translate3d(-20px, 0px, 0px);
  --icon-visibility: visible;
}

document.addEventListener("click", (e) => {
  e.target.closest(".button")?.classList.toggle("button__active");
});