KBD (Keyboard Key) Style

Nothing fancy, background image that is stretched with some padding.
some CSS to avoid selecting/marking/drag&drop.


You can right-click the iframe above
to inspect its code, or see following CSS (same):

kbd{
min-width:         24pt;
height:            24pt;
font-size:         12pt;
overflow:        hidden;
text-align:      center;
vertical-align:  middle;

display:      inline-block;
padding: 2pt 11pt 0pt 11pt;
margin:   1pt 1pt 1pt 1pt;

background-color: transparent;
background-image: url(data:image/png;base64,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);

background-repeat:       no-repeat;
background-size:         100% 100%;
background-position: center center;

box-sizing:        border-box;
background-origin: border-box;
background-clip:   border-box;

user-select:    none;
user-drag:      none;
touch-action:   none;
pointer-events: none;
}

Here is an “ENTER” key,
with the additional of an arrow-emoji-character (and some more padding).

(you can view the source-code for the examples by right-click the iframes and selecting “show frame source”).