Styles for keyboard keys in online documentation

In normal body text, it is usually best not to make the names of keys particularly eye-catching, because there the keys should not attract the most attention. However, this is different in a reference of keyboard shortcuts, for example, or in a document that is to be made particularly attractive visually. Here, you can use CSS to implement a design that makes the keys look almost like real keys.

Example 1

Press Ctrl + S to save the file.

Implementation for example 1

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


span.f_xx_kbd {
  background-color: #eee;
  color: #333;
  display: inline-block;
  line-height: 1;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 2px 0 0 rgba(255,255,255,0.7) inset;
  padding: 2px 5px;
  white-space: nowrap;
}

Step 2: Put the text to be marked as a key into a SPAN element of the keyboard-key class in the HTML code.

Normally, this happens automatically when you create a character style with the same name in your authoring tool and then assign this character style to the text in question. However, some authoring tools rename the styles internally. If it does not work as desired, you need to look at the generated HTML code and, if necessary, adjust the name of the class in the CSS code accordingly.

If the class in the CSS code is called keyboard-key, as in our example, the result in the HTML code generated by the authoring tool after generating the online documentation must finally look like this:


<p>Press <span class="keyboard-key">Ctrl></span> + <span class="keyboard-key">S</span> to save the file.</p>

Note: In fact , HTML provides the <kbd> element for marking up keys. However, most authoring tools for technical documentation do not support this element, which is why only the described way via the SPAN element remains.

Example 2

The keys appear even more vivid and eye-catching in the following solution, which is based on KEYS.css.

Press Ctrl + S to save the file.

Implementation for example 2

The general procedure is identical to that of example 1. Just use the following CSS codes instead.

CSS code for the light variant:


span.keyboard-key {
  display: inline;
  display: inline-block;
  min-width: 1em;
  padding: .2em .3em;
  text-align: center;
  text-decoration: none;
  border-radius: .3em;
  border: none;
  cursor: default;
  user-select: none;
  background: rgb(250,250,250);
  background: -moz-linear-gradient(top, rgb(210,210,210), rgb(255,255,255));
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(210,210,210)), to(rgb(255,255,255)));
  color:  rgb(50,50,50);
  text-shadow: 0 0 2px rgb(255,255,255);
  box-shadow: inset 0 0 1px rgb(255,255,255), inset 0 0 .4em rgb(200,200,200), 0 .1em 0 rgb(130,130,130), 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);
}

CSS code for the dark variant:


span.keyboard-key {
  display: inline;
  display: inline-block;
  min-width: 1em;
  padding: .2em .3em;
  text-align: center;
  text-decoration: none;
  border-radius: .3em;
  border: none;
  cursor: default;
  user-select: none;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgb(60,60,60), rgb(80,80,80));
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(60,60,60)), to(rgb(80,80,80)));
  color: rgb(250,250,250);
  text-shadow: -1px -1px 0 rgb(70,70,70);
  box-shadow: inset 0 0 1px rgb(150,150,150), inset 0 -.05em .4em rgb(80,80,80), 0 .1em 0 rgb(30,30,30), 0 .1em .1em rgba(0,0,0,.3);
}

Example 3

Finally, here is one more alternative with a light shadow:

Press Ctrl + S to save the file.

Implementation for example 3

The general procedure is again identical to that of example 1. In this case, use the following CSS code:


span.keyboard-key {
  box-sizing: border-box;
  width: auto;
  height: auto;
  padding: 4px 10px;
  margin: 4px 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #282828,#202020);
  box-shadow: inset -6px 0 6px rgba(0,0,0,0.15),
    inset 0-8px 8px rgba(0,0,0,0.25),
    0 0 0 2px rgba(0,0,0,0.75),
    5px 5px 10px rgba(0,0,0,0.4);
  overflow: hidden;
  color: #fff;
}

___

Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!