Can you please tell me how to show text slowly on hover of button ? I tried using transition:all 5s; but I am facing one issue my text coming from bottom to right .I know the issue that text didn't get proper width due to that it is coming from bottom and when width is available then it comes on right.
is it possible to show only when width is available ? so that user will not see text is coming from bottom to right .
here is my code 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>You can add opacity:0 to span element of button and on hover apply opacity:1 with transition. Refer :https://jsbin.com/nozomakuru/1/edit?html,css,output
You could use flexbox and set overflow: hidden on the button:
button {
/* Added */
display: flex;
align-items: center;
gap: 12px;
overflow: hidden;
/* ----- */
width: 30px;
height: 30px;
}
button:hover {
width: 80px;
transition: all 5s;
}<div>
<button>
<i>||</i>
<span>pause</span>
</button>
</div>You could set an animation-delay that will only appear once it's thick enough and play with the opacity:
button {
width: 30px;
height: 30px;
transition: all 5s;
}
button span {
display: none;
}
button:hover {
width: 80px;
}
button:hover span {
display: inline;
opacity: 0;
animation-name: appear;
animation-duration: 100ms;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes appear {
from {
opacity: 0;
position: absolute;
}
to {
opacity: 1;
position: static;
}
}<button>
<i>||</i>
<span>pause</span>
</button>