Better Keyboard Buttons in CSS

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);


  • 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

Share this post on…

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!


What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">