Categories
CSS

KeyCap Style in CSS

To simulate a keyboard key on a web page, use the following style with a span tag;

1

<span class="keycap">KeyCap</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 /* ----- KeyCap Style ----- */
span.keycap {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -khtml-border-radius: 4px;
  white-space: nowrap;
  border: 1px solid #aaa;
  border-style: outset;
  border-radius: 4px;
  padding: 0px 3px 1px 3px;
  margin: 0px 0px 0px 0px;
  vertical-align: baseline;
  line-height: 1.8em;
  background: #fbfbfb;
}