Is there a way to make text appear slowly on hover of a button without it coming from the bottom to the right? I attempted using transition:all 5s;, but encountered the issue of the text moving from the bottom to the right due to improper width. Is there a way to only show the text when there is enough width available so that the transition is seamless?
Here is the code snippet: https://jsbin.com/nividexoti/edit?html,css,output
button {
width: 30px;
height: 30px;
}
button span {
display: none;
}
button:hover {
width: 80px;
transition: all 5s;
}
button:hover span {
display: inline;
}<div>
<button>
<i>||</i>
<span>pause<span>
</button>
</div>