In dit voorbeeld zet ik de tekst die op de knop moet worden weergegeven tussen HTML span tags, en dit mag op een willekeurige plaats in jouw tekst staan.

Zo kunnen we bijvoorbeeld een "Enter" toets weergeven (alles wat in de span staat werkt, dus zelfs een <i class="icon-xyz"></i> zoals je die ziet bij IcoMoon voorbeelden, bijvoorbeeld om de Windows toets te reproduceren):

<span class="keyboardkey">Enter</span>

Je kunt uiteraard ook andere HTML tags gebruiken, maar in dit voorbeeld gebruik ik de "span" tag omdat het een van de meest gebruikelijke is.
De CSS voor "keyboardkey" voor een dergelijke span ziet er dan zo uit:

span.keyboardkey {
    box-shadow: rgb(132 132 132 / 0.16) 1px 1px 4px 1px;
    text-shadow: none;
    font-weight: bold;
    margin-right: 4px;
    margin-left: 4px;
    font-family: Lucida Sans Unicode,Lucida Grande,sans-serif;
    font-size: 14px;
    padding: 0.2em 1em;
    border: 1px solid;
    border-color: #d6d6d6 #b4b4b4 #b4b4b4 #d6d6d6;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #F2F2F2;
    background-image: -moz-linear-gradient(top, #FCFCFC, #E0E0E0);
    background-image: -o-linear-gradient(top, #FCFCFC, #E0E0E0);
    background-image: -webkit-linear-gradient(top, #FCFCFC, #E0E0E0);
    background-image: linear-gradient(top, #FCFCFC, #E0E0E0);
}

Dit genereert dan een knop zoals in dit voorbeeld:

Uiteraard zou je het argument kunnen maken dat toetsen niet bol staan, en je liever de knop ziet zoals hieronder:

Met een kleine CSS modificatie kun je ook dat bereiken (de kleuren in de dikke rode tekst zijn omgedraaid):

span.keyboardkey {
    box-shadow: rgb(132 132 132 / 0.16) 1px 1px 4px 1px;
    text-shadow: none;
    font-weight: bold;
    margin-right: 4px;
    margin-left: 4px;
    font-family: Lucida Sans Unicode,Lucida Grande,sans-serif;
    font-size: 14px;
    padding: 0.2em 1em;
    border: 1px solid;
    border-color: #d6d6d6 #b4b4b4 #b4b4b4 #d6d6d6;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #F2F2F2;
    background-image: -moz-linear-gradient(top, #E0E0E0, #FCFCFC);
    background-image: -o-linear-gradient(top, #E0E0E0, #FCFCFC);
    background-image: -webkit-linear-gradient(top, #E0E0E0, #FCFCFC);
    background-image: linear-gradient(top, #E0E0E0, #FCFCFC);
}