Styling the kbd element

Time 1 min read

Updated 

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.

Table of Contents

  1. How the kbd element looks on this site
  2. The code
  3. Reference

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

This is my version, obviously change the colors and other things as you see fit.

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

Optionally, you can add a “pushed” effect on hover with the below code.

kbd:hover {
	box-shadow: 0 1px 0 0.5px #888;
	transition: all 0.1s linear;
	top: 1px;
}

Reference

Once again, thanks to Dylan Smith for this!

Related Posts

Webmentions

Loading mentions...