kbd.css

kbd, .kbd{
  display: inline-block;
  padding: .17em .6em .17em .4em;
  margin: 0 .2em;
  position: relative;
  top: -.2em;

  color: #333;
  font: normal .8em/1  sans-serif;
  text-decoration: none;
  box-shadow: inset 0 -.2em .12em -.15em rgba(255, 255, 255, .7);
  cursor:default;
  border-radius: .3em;

  background: -ms-radial-gradient(top, ellipse cover,  #ddd 0%,white 100%);
  background: radial-gradient(ellipse at top right,  #ddd 0%,white 100%);
}

kbd::before, .kbd::before, kbd::after, .kbd::after{
  content:'';
  position:absolute;
  left:-.17em;
  right:-.17em;
  top:.1em;
  bottom:-.4em;
  border-radius: .4em;
}

/*white highlight*/
kbd::before, .kbd::before{
  z-index:-1;

  border:1px solid gray;
  background: #a8a8a8;
  background: radial-gradient(circle 3em at -1.7em 0, white 0%, white 70% ,rgba(255,255,255,0) 80%);
}

kbd::after, .kbd::after{
  z-index:-2;

  background: #a8a8a8;
  background: radial-gradient(ellipse 1em 1.7em at top right, #aaa 0%, #aaa 70%, #ccc 100%);
}

.kbd-down{
  top: 0em;
  box-shadow: inset 0 -.2em .3em -.1em rgba(200, 200, 200, .5);
}
.kbd-down::before, .kbd-down::after{
  top:-.1em;
  bottom: -.2em;
}
.kbd-down::before{ box-shadow: inset 0px 1px 6px 0px rgba(0,0,0,1); }