Little keyboard keys!

Kelsey Higham
Dec 19, 2011
11:15pm

Now you can put little button things on your game pages!

Check it out: WHOA.

<kbd>W</kbd><kbd>H</kbd><kbd>O</kbd><kbd>A</kbd><kbd>.</kbd>

When you're posting a game, there's code you can copy and paste. That said, read on if you want to do anything sophisticated.


Beginner: Buttons

To make a regular button, just wrap a letter or phrase in keyboard tags, like so:

Press Shift to jump.

Press <kbd>Shift</kbd> to jump.

Advanced: Invisible buttons

Let's say you're using arrow keys:


to move.

<kbd>↑</kbd>
<kbd>←</kbd><kbd>↓</kbd><kbd>→</kbd> to move.

That won't do. Shift the top button over by adding an invisible button before it.


to move.

<kbd class=invisible> </kbd><kbd>↑</kbd>
<kbd>←</kbd><kbd>↓</kbd><kbd>→</kbd> to move.

(Tip: If you get confused, click and hold on an invisible button to make it temporarily visible: right→←there.)

Double advanced: Boxed buttons

Let's say you want to include arrow keys in the middle of a sentence:

Press
to move.

Press <kbd class=invisible> </kbd><kbd>↑</kbd>
<kbd>←</kbd><kbd>↓</kbd><kbd>→</kbd> to move.

That won't do. Keep the buttons all on one line by putting them in a box.

Press
to move.

Press <kbd class=box><kbd class=invisible> </kbd><kbd>↑</kbd>
<kbd>←</kbd><kbd>↓</kbd><kbd>→</kbd></kbd> to move.

So, to recap:

  1. <kbd></kbd>
  2. <kbd class=invisible></kbd>
  3. <kbd class=box></kbd>

You can see them in action in the two example games, MOVE RIGHT and Kill the Bunnies.

Don't worry, you don't have to memorize this stuff; when you're posting a game, there's some code you can copy and paste.