I'm creating a transition button with css but the letter falls out of it. The button layout effect is as shown in the image:
Now this the code I'm using:
#btnCrear{
padding: 1px 15px 3px 2px;
border-radius:50px;
width: 32px;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition: width 1s, background 1s;
-moz-transition: width 1s, background 1s;
-o-transition: width 1s, background 1s;
transition: width 1s, background 1s;
}
#btnCrear:hover {
width: 100px;
}
<button style="float:right;" id="btnCrear">
problema
</button>
For this reason, I request your help, colleagues, since I have not found any solution on the net.
You just have to add it
overflow: hidden
to your button, like this:Documentation about
oveflow
For the text to move correctly with the animation and stylize it more, it is best to align it to the left with the text-indent property, clean the padding completely, set the initial width and height according to the size of the image you are going to place and hide the overflow: