how to maintain same size when the text replaces the image?

Question

i have a button which has an image in it.
when clicked, the image is replaced with a text.
but now the button size reduces to fit the text size.
how do i keep the same size for both image and text?
and how to center text vertically in a button?

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

i know this is a naive approach. But how do i go about it with <div> or any other such thing?

Answer 1

You could give the button a fixed size and set the image relative to the button size (see css tab)
https://code.sololearn.com/WhMoU74kaS4w/?ref=app

Maybe consider toggling the image visibility/ display instead of creating an html element each time via innerHtml...

Answer 2

I would resize the button to be slightly larger than the dimensions of the image.
And I would separate the styles.

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

Answer 3

Lisa that is great. Cleaner and responsive and the comments are informative.