Simple <kbd> Css

If you have a tech blog and regularly show keyboard shortcuts, you may want to wrap the keys in the HTML <kbd> tag. For example:

<kbd>Command</kbd> + <kbd>C</kbd>

The default CSS style for <kbd> is not eye-catching. When people see it, it doesn’t look like a keyboard key at all. It’s not really representative of how actual keyboard keys look.

So you’ll need to style it with CSS.

I found this style on Stack Overflow. It’s basic and simple, but eye-catching enough. When users see it, they know that they’re supposed to press the key on their keyboard.

So here’s the <kbd> CSS. Feel free to copy and modify it:

kbd {  
  padding: .1em .6em;  
  border: 1px solid #ccc;  
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;  
  font-size: 75%;  
  background-color: #f7f7f7;  
  color: #333;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;  
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;  
  box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;  
  border-radius: 3px;  
  display: inline-block;  
  margin: 0 .1em;  
  text-shadow: 0 1px 0 #fff;  
  line-height: 1.4;  
  white-space: nowrap;  
}

I use it myself on my blog, and here’s an example result, the shortcut to copy:

Command + C

Looks good, right? By staring at it, you understand that you’re supposed to press the keys on your keyboard, right?

I hope so.

Anyway, that’s all for today’s short post.

I hope this helps you style your keyboard shortcuts better on your blog.

As usual, if you have any questions or a better method, leave a comment below. Thanks for reading, and see you next time!