Css animation to extend button text on hover

Question

I want to show more text on a button when it's hovered and I want the button to shrink and grow with the extended text.

I need a general solution since the text on the button and thereby its width will depend on the users choice of language.

This is my (currently not working) attempt

.hover-value {
  display: inline-block;
  visibility: collapse;
  width: 0%;
  -webkit-transition: width 2s;
  transition: width 2s;
  overflow: hidden;
}
button:hover .hover-value {
  visibility: visible;
  width: 100%;
}

<button>
  Result
  <span class="hover-value">Add new result</span>
</button>

Also on JsFiddle: https://jsfiddle.net/JohanGovers/46392xss/

I'm using jQuery and bootstrap in my project but would like to solve this with css if possible. I've tried playing around with visibility property as suggested in other SO answers but to no avail.

Any help would be greatly appreciated.

Answer 1

For the nicest animation I've decided to animate the max-width property. This is because, at the moment, you cannot animate to or from width:auto.

(Set max-width:7rem to something greater than the length of your text.)

To avoid a bunch of aligning CSS I used display: inline-flex as this perfectly aligned it without using vertical-align and whatnot. (If this is a problem it can be changed.)

Then I used white-space:nowrap to force all the text onto one line so that it animated more smoothly.

button span {
  max-width: 0;
  -webkit-transition: max-width 1s;
  transition: max-width 1s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
}
button:hover span {
  max-width: 7rem;
}

<button id="btn">
  Result 
  <span>New result</span>
</button>
<button id="btn">
  Result 
  <span>Different text</span>
</button>

Answer 2

Done but with quirky animation:

Updated- now smooth result thanks to jaunt, who suggested to add this white-space: nowrap; to the button css

JS Fiddle

button {
  width: 53px;
  height: 21px;
  overflow: hidden;
  -webkit-transition: width 1s;
  transition: width 1s;
  white-space: nowrap; /*this was suggested by jaunt, thanks */
}
button:hover {
  width: 145px;
  -webkit-transition: width 1s;
  transition: width 1s;
}
button:hover::after {
  content: 'Add new result';
}

<h3>This is what I've got so far.</h3>

<button id="btn">
  Result
</button>