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.
![]()
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!