Link Button with Text Display States

Link-based button show different display states including different text for each state.

HTML

<a href="#" id="button">
    <span id="inactive">Inactive</span>
    <span id="hover">Hover</span>
    <span id="active">Active</span>
</a>

<div class="increments">
  <button class="butt" type="button">
  +
  </button>
  <div class="number">
    <p>
    52
    </p>
  </div>
  <button class="butt" type="button">
  -
  </button>
</div>

CSS

div.increments:hover {
  display: none;
}
.increments {
  margin: 20px auto;
  width: 40px;
  text-align: center;
}

.butt {
  visibility: hidden;
  padding : 0px;
}

.number {
  padding: 4px 0px;
}
#button {
    background-color: rgba(0, 0, 0, .25);
    border: 4px solid black;
    color: white;
    display: block;
    font: normal bold 16px Verdana, Geneva, sans-serif;
    display: block;
    height: 40px;
    line-height: 40px;
    margin: 20px auto;
    text-align: center;
    text-decoration: none;
    width: 175px;
}
#inactive {
    
}
#hover {
    display: none;
}
#active {
    display: none;
}

#button:hover {
    background-color: rgba(46, 149, 39, .25);
    border: 4px solid rgb(46, 149, 39);
}
#button:hover #inactive {
    display: none;
}
#button:hover #hover {
    display: inline;
}

#button:active {
    background-color: rgba(149, 39, 39, .25);
    border: 4px solid rgb(149, 39, 39);
}
#button:active #inactive {
    display: none;
}
#button:active #hover {
    display: none;
}
#button:active #active {
    display: inline;
}