A minimal keyboard key effect with CSS

February 27, 2025

I use the kbd element to specify keypresses in my posts. To differentiate it from the inline code element, I’ve styled it as a minimal version of an actual key:

kbd {
  font-family: ui-monospace, monospace;
  font-size: 90%;
  margin: 0 0.07rem;
  padding: 0.07rem 0.35rem;
  border: 0.07rem solid;
  border-bottom: 0.18rem solid;
  border-radius: 0.21rem;
}

kbd:hover {
  border-bottom: 0.07rem solid;
  vertical-align: -0.1rem;
  cursor: text;
}

The hover effect is inspired from Styling the kbd element by Dylan Smith. I experimented with the border-bottom and vertical-align values till I found a combination that recreated the hover effect well.

Here are keys from the QWERTY keyboard layout as an example: