js-keyboard-keys

Some simple code to include working keyboard key visuals to help explain users keyboard shortcuts. Automatically adapts for Windows/Mac users.

Ctrl Shift Alt ⊞ Win

Usage

<span class="key-ctrl">Ctrl</span>
<span class="key-shift">Shift</span>
<span class="key-alt">Alt</span>
<span class="key-meta">⊞ Win</span>

JavaScript will change buttons to Mac variants.

Try pressing Ctrl or Shift to see this baby shine.

This Ctrl-key and this Cmd-key will look the same on Mac. While this Ctrl-key will look like a Ctrl key, that only listens to Mac.

We can do Alt-key too, or Option for Mac users, who see two identical buttons.

Add a subtle pressing effect by adding class animated.

<span class="animated key-ctrl">Ctrl</span>

Now you got your Ctrl or Shift keys visually pressed.

And of course, it works with the Alt-key too, or Option for Mac users, who see two identical buttons.