0
Thanks

A few words of thanks would be greatly appreciated.

Display keystrokes in an HTML document





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:
<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:

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:

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

A few words of thanks would be greatly appreciated.

Ask a question
CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jeff Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.

Original article published by . Translated by jak58. Latest update on 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 (https://ccm.net/).

0 Comments