nakree

h1, h2, h3, h4, .someclass, .wtf, #id, input[type="text"] { font-size: 100px; }

<button class="btn" data-hover-text="hello, world!!"></button>

.btn {
  border: 0;
  background: green;
  display: inline-block;
  width: 3em;
  height: 3em;
  border-radius: 1.5em;
  overflow: hidden;
  transition: width 0.2s linear;
}

.btn::before {
  display: inline-flex;
  width: 100%;
  height: 100%;
  color: white;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  transition: letter-spacing 0.2s linear;
  letter-spacing: -2px;
  content: ">";
}

.btn:hover {
  width: 10em;
}

.btn:hover::before {
  letter-spacing: 0px;
  content: attr(data-hover-text);
}