What's also interesting to realize is that the standard HTML button is a sort of unholy chimera that doesn't model any sort of physical button in common usage.

Physically speaking, we generally have either:

1. a "push" button, which activates when you press it down fully, or

2. a "hold" button, which activates continuously when you hold it down.

In either case, the "action" occurs at the instant you press the button down, and perhaps continues until you let go.

But the standard HTML button works differently, and from a physical perspective, quite weirdly: when you press it, it only gets "cocked", and when you release it, it activates. That's why its state representation feels complex and unintuitive!

Rather than the behavior of a "push" or "hold" button, the standard HTML button behavior is more like extracting an SD card: you press the card in and then release it to get it out.

(I'm sure there are physical buttons out there somewhere that activate on release. And you can also make a great model of a "push" or "hold" button with custom JS. But I think it's fair to say that the default HTML button doesn't work like real-world experience would lead anyone to expect.)