JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="btn-group"  data-toggle="buttons">
      <button class="btn btn-primary commonButton">Избранное</button>
      <button class="btn btn-primary commonButton">Запланировано</button>
      <button class="btn btn-primary commonButton">Покупки</button>
    </div>

CSS

.btn-group >.commonButton {
    color: white;
    background: #aea79f;
    border: none;
}

.btn-group > .commonButton:hover {
    background: #978e83;
    color: white;
}
.btn-group > .btn.active,
.btn-group > .commonButton:active,
.btn-group > .commonButton:focus{
    background: #978e83;
    color: white;
    z-index:0;    
    outline: none;
}