Estilizando la etiqueta <kbd> con CSS

La etiqueta <kbd> es menos usual y menos conocida que otras etiquetas como <code> o <pre>. Su uso es definir entradas de teclado, teclas que hay que pulsar. Por ejemplo cuando escribimos:

Para obtener un guión largo debemos pulsar las teclas Alt + 0151

Un marcado html adecuado sería el siguiente:

<p>Para obtener un guión largo 
debemos Pulsar las teclas 
<kbd>Alt</kbd> + <kbd>0151</kbd></p>

No es frecuente que la etiqueta <kbd> tenga asociados estilos CSS. Lo más que podemos encontrarnos usualmente es que aparezca en tipografía monoespaciada, de tipo código. Esta presentación es muy mejorable con CSS. Hay ejemplos muy sofisticados que recrean la apariencia de una tecla de modo convincente. A mí me gustan las cosas más sencillas, así que he adaptado el CSS que podéis encontrar en este Codepen de Dudley Storey.

He añadido a mi hoja de estilos el siguiente código:

kbd {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.1em 0.5em;
    margin: 0 0.2em;
    box-shadow: 0 2px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
    background-color: #f1e7dd;
}

Y el efecto, con el ejemplo anterior, es el siguiente:

Para obtener un guión largo debemos pulsar las teclas Alt + 0151

Para los más exigentes, hay incluso una librería CSS dedicada de implementación muy sencilla.