JSFiddle - React, Tailwind, and code Playground

by JohanGovers

HTML

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

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

<hr>
<h3>This is how I want it to look on hover after the animation completes</h3>
<button>
    Result
    <span>Add new result</span>
</button>
   
 <hr>
<h3>This is how I want it to look before the animation starts</h3>
<button>
    Result
</button>

CSS

.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%;
    display: inline-block;
}