Display keystrokes in an HTML document

December 2016




When writing documentations or tutorials in the HTML format, it can be useful to symbolize keystrokes with small graphics, for example when the user is prompted to press a certain key combination.

Here is a simple way to do this in HTML:

Example 1


<style type="text/css">    
<!--    
body { font-family: Verdana, Arial, Helvetica, 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>    

Tapez <span class="touche">A</span>     
<span class="touche">?Entrée</span>



Which gives the following result:

Example 2


Here's another example


<style type="text/css">    
<!--    
body { font-family: Verdana, Arial, Helvetica, 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>    

Tapez <span class="touche">A</span>     
<span class="touche">?Entrée</span>


Which gives the following result:

Special Characters


If you need other symbols or letters, refer to Unicode tables..

Related :

This document entitled « Display keystrokes in an HTML document » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.