Better Keyboard Buttons in CSS

Here's a simple scrap of CSS which you can Ctrl+C and Ctrl+V

 CSSkbd {
    border: .1em solid #aaa;
    border-radius: 15%;
    display: inline-block;
    padding: .1em .5em;
    background: linear-gradient(180deg, #fff, #fff, #fff, #ddd);
    user-select: none;
    cursor: pointer;
    color: #000;
    font-weight: bold;
}
kbd:hover {
    background: linear-gradient(0deg, #fff, #fff, #fff, #ddd);
}

Features

• Semantic use of the kbd element
• Uses em to ensure it is consistent with the font size of your document
• Text of buttons is not selectable
• Cursor will change to a pointer when hovered
• "Push" effect when hovered

Unicode Buttons

• Apple command ⌘
• Apple alt ⌥
• Enter ⏎ or ↵
• Backspace ⌫
• Shift ⇪
• Escape ␛
• Tab ⭾