Exibir os botões do teclado em um documento HTML

Dezembro 2016

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 :
Este documento, intitulado « Exibir os botões do teclado em um documento HTML »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.