CSS Keyboard Buttons

Goto /examples/css/
..

Ever wanted your tutorials to have that little extra something ? Maybe not. But these make examples clearer, and keep the console output, keyboard commands, and footnotes separate

How about using Unicode arrows for meaningful key glyphs, rather than saying <return>?

How to use it:

  1. Download buttons.css
  2. Include the file in the page(s), via a <link rel="stylesheet" href="buttons.css" media="screen" title="Default" type="text/css" />, or copy & paste the code into the bottom of your <style> block.

Example

To move a running program to be a background process:
Ctrl + z then type b g ↵

To restart X:

Ctrl + Alt + ←

Source:

<kbd><span class="button held">Ctrl</span> + <span class="button held ">Alt</span> + <span class="button glyph"><abbr title="backspace">←</abbr></span></kbd>

Ugly Example

To move a running program to be a background process:
Ctrl + z then type b g ↵

To launch Finder:
⌘ + f