CSS animation for hover button text

Question

I want to show more text on the button when it freezes, and I want the button to decrease and increase with the expanded text.

I need a general solution, since the text on the button and, therefore, its width will depend on the user's 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>

Run codeHide result

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

I use jQuery and bootstrap in my project, but would like to solve this with css if possible. I tried playing with visibility, as suggested in other SO answers, but to no avail.

Any help would be greatly appreciated.

Answer 1

max-width. , width:auto.

( max-width:7rem , .)

CSS, display: inline-flex, , vertical-align -. ( , .)

white-space:nowrap, , .

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>

Hide result

Answer 2

, :

- jaunt, white-space: nowrap; 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>

Hide result

Answer 3

Try this way to get the result as you like.

.hover-value {
    display: inline-block;
    /*visibility: collapse;*/
    -webkit-transition: width 2s;
    transition: width 2s;
    overflow: hidden;
    display:none;
  top:3px;
    position:relative;
}

button:hover .hover-value {
    visibility: visible;
    display: inline-block;
}

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

Run codeHide result

Answer 4

You can make a similar effect with the font size.

Change it from 0px to inheritance or to a specific size.

.hover-value {
    font-size: 0px;
    -webkit-transition: font-size 1s;
    transition: font-size 1s;
}

button:hover .hover-value {
    font-size: inherit;
}

See e Demo in jsfiddle.

Answer 5

Hope this helps you, I shared the jfiddle link below for your reference, but pasting the appropriate code here.

body{
    margin:0;
    padding:0;
}

h3{
    margin:0;
    padding:0;
    line-height:1.5em;
}
button{
   text-align:left;
   width:7.5em; 
   overflow:hidden;
   transition:width 1s ease-in-out;
}
button:hover{
     width:20em;
     transition:width 1s ease-in-out;
}
button:focus{
    outline:none;
}
button span.sthGroup{
    display:block;
    width:20em;
    overflow-x:hidden;
}
</style>

<h3>button</h3>
<button class="" type="button">
    <span class="sthGroup">
        <span>some text here</span>
        <span>some additional text here</span>
    </span>
</button>

Reference example