<a href="#" class="btn">
  <span class="btn__name">Default</span>
  <span class="btn__counter">0</span>
</a>

<a href="#" class="btn btn--positive">
  <span class="btn__name">Positive</span>
  <span class="btn__counter">2</span>
</a>

<a href="#" class="btn btn--negative">
  <span class="btn__name">Negative</span>
  <span class="btn__counter">-2</span>
</a>

/* General styles */
body {
  width: 500px;
  margin: 25px auto;
  text-align: center;
}

/* Block */
.btn {
  overflow: hidden;
  display: inline-block;
  border: none;
  border-radius: 3px;
  color: #143232;
  font-family: Arial;
  font-size: 0;
  text-decoration: none;
  
  /* Block element */
  &__name {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e0e1e2;
    font-size: 16px;
  }
  
  /* Block element */
  &__counter {
    display: inline-block;
    padding: 10px 15px;
    background-color:  #d6d7d8;
    font-size: 16px;
  }
  
  /* Modifiers */
  &--positive {
    color: #fff;
  }
  
  &--positive &__name {
    background-color: #21ba45;
  }
  
  &--positive &__counter {
    background-color: darken(#21ba45, 10%);
  }
  
  &--negative {
    color: #fff;
  }
  
  &--negative &__name {
    background-color: #db2828;
  }
  
  &--negative &__counter {
    background-color: darken(#db2828, 10%);
  }
}