Read description

Question

So I have this button. I want the text inside to stay still and not move during the animation. Is this possible, if so, how?
https://code.sololearn.com/WyOu214KFJg5/?ref=app

Answer 1

You can add:

white-space: nowrap;

to get the text to display on a single line. Then, if you don't want it to move to the center along with the transition, you can always align it (to the left, and apply sufficient padding) or fix an absolute position for it.

Answer 2

Applying Hatsy Rei's fixes:

https://code.sololearn.com/WcR57FsqDQ08/?ref=app

It still moves a bit though.