Styling the kbd element

web development

I wanted to style my <kbd> element to look like a keyboard, and a google search took me to someone else's blog post that had a nice bit of code and invited others to steal it. So I did.

Information

I want to start this off by saying this is not my code, but was taken from Dylan Smith from his own blog post on the subject, and I simply made a few modifications for my site. I encourage you to go read his post since mine is terse for my own purposes.

How the kbd element looks on this site

  • ESC

  • ENTER

  • SHIFT

  • CTRL

  • ALT

  • DEL

  • A

  • 1

  • .

The code

kbd {
  background-color: #ccc;
  color: #222;
  border-radius: 0.25rem;
  border: 1px solid #000;
  box-shadow: 0 2px 0 1px #aaa;
  cursor: default;
  font-family: sans-serif;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.2;
  min-width: 0.75rem;
  display: inline-block;
  text-align: center;
  padding: 2px 5px;
  position: relative;
  top: -1px;
}

Optionally, you can add a “pushed” effect on hover with the below code. (I don’t use it for this site.)

kbd:hover {
  box-shadow: 0 1px 0 0.5px #ccc;
  top: 1px;
}

Once again, thanks to Dylan Smith for this!