Stack Overflow like keyboard buttons in post

Here's a quick hack to get yourself one of those Stack Overflow like keyboard buttons. For those of you who don't know what these are, have a look here. I am writing this blog post while I wait for the India Australia cricket match to begin which is in a few minutes from now, so I'll be quick :).

To add these cool looking keys in your post, just write them in <kbd>...</kbd> tags. Simple, right? Not quite. We’re not done yet. We need to do just one more thing. Add the following in your stylesheet:

And we are done. Give it a try. These look wonderful to me. Here's an example: Ctrl + D

kbd {
	padding: 2px 4px;
	white-space: nowrap;
	color: black;
	background: #EEE;
	border-width: 1px 3px 3px 1px;
	border-style: solid;
	border-color: #CCC #AAA #888 #BBB;
}

Here's a small keyboard built using these buttons :)

 ~  1  2  3  4  5  6  7  8  9  0  -  = Backspace  

Tab   q  w  e  r  t  y  u  i  o  p  [  ] ENTER    

Caps    a  s  d  f  g  h  j  k  l  ;  ´  +        

Shift <  z  x  c  v  b  n  m  ,  .  / Shift         

Ctrl   Win Alt          Space           Alt  Win  Menu  Ctrl