Add Styling to Keyboard Keys with CSS

In one of my jobby-jobs, I write user educational articles and record screencasts for a software company. We often instruct readers to press keyboard keys to accomplish some task. Our original styling looked something like this:

Press Cmd + C to copy.

I went in search for some better styling and here’s the result:

Press Cmd + C to copy.

KBD Element

According to the MDN Web Docs, the <kbd> element “represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.”

I wrap each key in a <kbd> element, like this: <kbd>Enter</kbd>

CSS Styling

I liked the styling MDN uses for the <kbd> element, so I grabbed it an made a few modifications to better mach my style. See mine below.

kbd {
  border: 2px solid $dark; 
  box-shadow: 2px 2px $dark; 
  font-size: .85em; 
  line-height: .85em; 
  display: inline-block;
  font-weight: 600;
  letter-spacing: .05em; 
  padding: 3px 5px;
  white-space: nowrap;
}