How to show text slowly on hover of button?

user_5711656 0
Viewed 104

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>

css html javascript
3 Answers
user_43975080

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>

user_171754410

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>

user_153591570
Related