Better Keyboard Buttons in CSS

by @edent | # # # # | 2 comments | Read ~920 times.

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

kbd {
    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

2 thoughts on “Better Keyboard Buttons in CSS

  1. I’d leave out the following properties:
    user-select: none; → Why is this useful? It prevents to select and copy the text, which is a disadvantage for users.
    cursor: pointer; and :hover → They signalize that the element is interactive, but it’s not.
    In my opinion it’s important to design the kbd keys in a way that they aren’t confused with buttons. Good idea to use a bold font-weight!

  2. Kai Hendry says:

    Thanks Terence. I just penned https://dabase.com/blog/2020/Excel_shortcuts/ with this inspiration.

Leave a Reply

Your email address will not be published. Required fields are marked *