SO: User-Select

HTML

<div id="titleBar">
    <span id="titleText">CodePlayer</span>
    <div id="buttonBar">
      <div id="buttonHTML" class="button">HTML</div>
      <div class="buttonDivider"></div>
      <div id="buttonCSS" class="button" style="user-select:none">CSS</div>
      <div class="buttonDivider"></div>
      <div id="buttonJS" class="button">JavaScript</div>
      <div class="buttonDivider"></div>
      <div id="buttonOutput" class="button">Output</div>
    </div>
  </div>

CSS

.button {
      margin: 0;
      padding: 5px;
      background-color: #CCCCCC;
      height: 100%;
      font-family: helvetica, sans-serif;
      display: flex;
      align-items: center;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }

    .buttonDivider {
      border-left: gray 1px solid;
      height: 100%;
    }

    .button:hover{
      background-color: gray;
      cursor: pointer;
    }

    #buttonBar {
      display: flex;
      border: gray 1px solid;
      border-radius: 5px;
      overflow: hidden;
      margin: 0 auto;
      align-items: center;
      user-select: none;
    }

    #titleBar {
      display: flex;
      width: 100%;
      height : 40px;
      padding: 5px;
      background-color: #CCCCCC;
      user-select: none;
    }
    #titleText {
      display: flex;
      align-items: center;
      font-family: helvetica, sans-serif;
      font-size: 25px;
      font-weight: bold;
    }

    body{
      margin: 0;
      padding: 0;
    }
    div {
      margin: 0;
      padding: 0;
    }