Muchas veces necesitamos para nuestro blog o página web introducir comandos del teclado para realizar diversas funciones. Combinaciones de teclado tales como ALT + 64 para hacer arrobas o incluso mostrar en aplicaciones que letras se deben presionar.

Con CSS es sencillo realizar estos botones, que solamente simulan el diseño de un teclado básico en CSS para poder incorporar caracteres dentro de él. Lo primero que deben hacer es incorporar el siguiente código de CSS en su fichero de estilo:

tecla {
  padding: 0.1em 0.6em;
  border: 1px solid #ccc;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f7f7f7;
  color: #333;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px #fff inset;
  border-radius: 3px;
  display: inline-block;
  margin: 0px 0.1em;
  text-shadow: 0px 1px 0px #fff;
  line-height: 1.4;
  white-space: nowrap;
  font-size: 12px;
  cursor: pointer;
}
tecla:hover {
  background-color: transparent;
  cursor: pointer;
}

Una vez incorporado en su CSS, para poder mostrar un botón con estilo de teclado es necesario utilizar una etiqueta HTML llamada “tecla” tal cual la hemos nombrado en nuestro fichero CSS.

<tecla>Bloq Mayús</tecla>

De esta manera con tan solo poner la etiqueta de la tecla saldrá un diseño bonito y minimalista del teclado, ideal para todo tipo de página web o blog que requiera un uso del teclado.