CODEWITHSUNDEEP
javascripthtmlcss
user5711656
user5711656

Reputation: 3678

How to show text slowly on hover of button?

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>

Upvotes: 3

Views: 543

Answers (3)

code
code

Reputation: 6349

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>

Upvotes: 1

aerial
aerial

Reputation: 1198

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>

Upvotes: 1

Pranay Binju
Pranay Binju

Reputation: 621

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

Upvotes: 1

Related Questions