How to fix the messing up with a button animation when a text appear and the button width grow but the text doesn't fit for a moment?

Question

I've developed a button that expands and shows a text but there's a moment during the growing that the text doesn't fit and looks bad.

Do I have any option to delay the text display until the button is big enough to fit it?

#emailButton {
  background-color: grey;
  color: black;
  height: 48px;
  width: 48px;
  border: none;
  border-radius: 48px;
  transition: all 0.5s linear;
}

#emailButton:hover {
  background-color: blue;
  border: none;
  color: white;
  width: 225px;
  height: 67px;
  border-radius: 67px;
}

#emailButton:hover::before {
  content: "Some text here"
}

user_10867454 · Answer

There are several things you could do, a mixture of font size and opacity for example.

As a simple example this snippet takes the font-size from 0px to 14px on the hover.

#emailButton{
    background-color: grey;
    color: black;
    height: 48px;
    width: 48px;
    border: none;
    border-radius: 48px;
    transition: all 0.5s linear;
}
#emailButton:hover{
    background-color: blue;
    border: none;
    color: white;
    width: 225px;
    height: 67px;
    border-radius: 67px;
    
}
#emailButton::before{
    content: "Some text here";
    transition: all 0.5s linear;
    z-index: 1;
    font-size: 0;
}
#emailButton:hover::before{
 font-size: 14px;
 z-index: 1;
}

How to fix the messing up with a button animation when a text appear and the button width grow but the text doesn't fit for a moment?

1 Answers