how to show text slowly on hover of button?-CodePudding

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

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>
  <button>
    <i>||</i>
    <span>pause<span>
  </button>
</div>
</body>
</html>

CSS

button{
  width:30px;
  height:30px;
}

button span{
  display:none;
}

button:hover {
   width:80px;
   transition:all 5s;
}
button:hover span{
  display:inline;
}

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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>