CSS FOR BEGINNERS

When does a button stop working?

Compare pointer-events: none with the HTML disabled attribute.

Normal button

<button>

Mouse:: works
Keyboard:: works

Pointer events: none

pointer-events: none;

Mouse:: passes through
Keyboard:: still works

Disabled button

<button disabled>

Mouse:: disabled
Keyboard:: skipped

Try your keyboard

Press Tab to move between buttons. Press Enter or Space to activate the focused button.

Inside the Playground viewer, click a blank area of this demo first, then press Tab. Browser and system keyboard settings can affect focus navigation.

Last action

Activate a button to see its message here.

pointer-events: none does not disable keyboard activation.