Use CSS Grid to stack items, and visibility: hidden to hide/show spinner. This approach allows the largest item to size the button, and keeps the button text accessible

If you like this one, here is another demo of CSS Grid stacking →

grid-area: 1/-1; You don't need to name area to use grid-area. I really like your approach.

ah good point - you can just use the implicit grid columns

is that a… middle finger?

as the Good Lord intended

took different parts from ppl in this thread this is nice

Big fan of this! Nice work

We all know the real reason you made this video is so you can show off that badass mouse pointer 😂

🖕😁🖕

I love this! I should use grid to overlay elements more often. The only problem with visibility: hidden is that you can't transition between the two states using fade in/out.

you can also add opacity to this to get in/out transitions If you want to do more allow-discrete and content-visibility will do this as well