'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?

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"
}
<button class="align-items-center" id="emailButton">
              <svg id="emailIcon" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 0H2C0.9 0 0.00999999 0.9 0.00999999 2L0 14C0 15.1 0.9 16 2 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H2V4L10 9L18 4V14ZM10 7L2 2H18L10 7Z" fill="currentcolor"/>
              </svg>
            </button>
htmlcss


Solution 1:[1]

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;
}
<button class="align-items-center" id="emailButton">
              <svg id="emailIcon" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 0H2C0.9 0 0.00999999 0.9 0.00999999 2L0 14C0 15.1 0.9 16 2 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H2V4L10 9L18 4V14ZM10 7L2 2H18L10 7Z" fill="currentcolor"/>
              </svg>
            </button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A Haworth

Related Questions