title: Css animation to extend button text on hover
body: <p>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.</p>
  
  <p>I need a general solution since the text on the button and thereby its width will depend on the users choice of language.</p>
  
  <p>This is my (currently not working) attempt </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;
    Result
    &lt;span class="hover-value"&gt;Add new result&lt;/span&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also on JsFiddle: <a href="https://jsfiddle.net/JohanGovers/46392xss/" rel="noreferrer">https://jsfiddle.net/JohanGovers/46392xss/</a></p>
  
  <p>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.</p>
  
  <p>Any help would be greatly appreciated.</p>