Display keystrokes in an HTML document

April 2017




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


Published by jak58. Latest update on April 30, 2013 at 10:22 AM by jak58.
This document, titled "Display keystrokes in an HTML document," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).