Blog Post
Add Styling to Keyboard Keys with CSS
July 15, 2021
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;
}