Exibir os botões do teclado em um documento HTML

Fevereiro 2017

Se você escreve documentos no formato HTML, pode ser útil simbolizar as teclas do teclado, por exemplo, quando o usuário é convidado a digitar uma certa combinação de teclas.

Veja uma maneira simples de fazê-lo em HTML:

Variante n° 1

<style type="text/css"> 
<!--
body { font-family: Verdana, Arial, Helvética, sans-serif; font-size: 10pt; background-color:white; }

span.touche
{
margin-right: 1px;
padding-left:2px;
padding-right:2px;
border: 1px solid #6f6f6f;
background-color: #cfcfcf;
border-radius: 0.2em;
font-weight: bold;
-moz-border-radius: 0.2em;
}
-->
</style>

Digite <span class="tecla">A</span>
<span class="tecla">?Enter</span>

O que dá:

Variante n° 2

Veja uma variante com um pequeno efeito de relevo:

<style type="text/css"> 
<!--
body { font-family: Verdana, Arial, Helvética, sans-serif; font-size: 10pt; background-color:white; }

span.touche
{
margin-right: 1px;
padding-left:2px;
padding-right:2px;
background-color: #dadada;
border-radius: 0.2em;
-moz-border-radius: 0.2em;
font-weight: bold;
border-style:outset;
border-width:2px;
}
-->
</style>

Digite <span class="tecla">A</span>
<span class="tecla">?Enter</span>

O que dá:

Caracteres especiais

Se você precisar de outros símbolos ou letras, você pode consultar as tabelas Unicode.

Veja também

Artigo original publicado por . Tradução feita por pintuda. Última modificação: 8 de maio de 2016 às 04:20 por pintuda.
Este documento, intitulado 'Exibir os botões do teclado em um documento HTML', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.