css animation expand button content

how can I create a button animation like this using css?

what I want to achieve

I want to display only first letter of button, and when hover it expands and shows rest of letters.

maybe something like:

<button>h<span>ello</span></button>

and css:

button {
   width: 40px;
   height: 40px;
   border-radius: 50%;
}

button span {
   display: none: /* maybe hide it first? */
}

but when I change the width it looks like a stretched circle because the radius. Whats the best approach to modify the width but keep the same border radius?

Thanks,

AH.