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 ⭾