What makes an overlay (or any popup box) open and close?

Real newbie here with what may be a really stupid question, but please bear with me, as there is something fundamental (almost philosophical...) I don't get; I'm not even sure I'm asking the question correctly:

Say I need a message to pop up: usually there's a button the user needs to click on to open the message box; in the message box itself there's usually a big "X" or "Cancel" area, which needs to be clicked on to return to the main page.

The appearance of the "open message" button is determined by something like this:

.button {
font-size: 1em;
cursor: pointer;
....
}

etc.

The appearance of the button when hovered over by the mouse, is determined by something like this:

.button:hover {
background: blue;
....
}

The appearance of the overlay is determined by something like this:

.overlay {
visibility: hidden;
opacity: 0;
.....
}

And finally, the message box itself is something like this:

.popup {
margin: 20px auto;
....
}

What I don't understand is what causes the whole thing to open up on a click event; I can see the ".button:hover" but not a ".button:click", or anything like that. And, obviously, I have the same question about closing the message box and the overlay.

So there must be something basic about CSS philosophy that I don't get - any help would really be appreciated. And, again, apologizes if I'm not doing this correctly.