kbd.min.css

.kbd,kbd{display:inline-block;padding:.17em .6em .17em .4em;margin:0 .2em;position:relative;top:-.2em;color:#333;font:400 .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,#fff 100%);background:radial-gradient(ellipse at top right,#ddd 0,#fff 100%)}.kbd::after,.kbd::before,kbd::after,kbd::before{content:'';position:absolute;left:-.17em;right:-.17em;top:.1em;bottom:-.4em;border-radius:.4em}.kbd::before,kbd::before{z-index:-1;border:1px solid gray;background:#a8a8a8;background:radial-gradient(circle 3em at -1.7em 0,#fff 0,#fff 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:0;box-shadow:inset 0 -.2em .3em -.1em rgba(200,200,200,.5)}.kbd-down::after,.kbd-down::before{top:-.1em;bottom:-.2em}.kbd-down::before{box-shadow:inset 0 1px 6px 0 rgba(0,0,0,1)}