ABCCtrl
The below CSS styles keyboard buttons like so…
<kbd>A</kbd><kbd>B</kbd><kbd>C</kbd><kbd>Ctrl</kbd>
<style>
kbd {
align-items: center;
background: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
border: 0;
border-radius: 2px;
box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, .4);
color: #969faf;
display: flex;
height: 18px;
justify-content: center;
margin-right: .4em;
padding: 0 8px 1px;
width: fit-content;
font: 80% SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.kbd-ul {
color: #969faf;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.kbd-ul li:not(:last-of-type) {
margin-right: .8em;
}
.kbd-ul li {
align-items: center;
display: flex;
}
.kbd-span {
display: flex;
min-width: calc(40px + .8em);
}
svg[Attributes Style] {
width: 15;
height: 15;
}
svg:not(:root) {
overflow-clip-margin: content-box;
overflow: hidden;
}
.kbd-Label {
font-size: .75em;
line-height: 1.6em;
color: #969faf;
}
</style>
<ul class="kbd-ul">
<li><kbd><svg width="15" height="15" aria-label="Enter key" role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
</g>
</svg>
</kbd>
<span class="kbd-Label">to select</span></li>
<li>
<kbd>
<svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path></g>
</svg>
</kbd>
<kbd>
<svg width="15" height="15" aria-label="Arrow up" role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path></g></svg>
</kbd><span class="kbd-Label">to navigate</span></li>
<li><kbd"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg></kbd><span class="kbd-Label">to close</span></li>
</ul>