<div class="mole-game">
  <label class="mole-button mole-hole" for="mole-hole-toggle">whack the hole</label>
  <label class="mole-button mole-mole" for="mole-mole-toggle">whack the mole</label>
</div>
<div class="mole-jail"></div>
<input id="mole-hole-toggle" class="toggle mole-hole-toggle" name="mole-whack" type="radio" />
<p class="mole-result mole-hole-result">Hole whacked!</p>
<input id="mole-mole-toggle" class="toggle mole-mole-toggle" name="mole-whack" type="radio" />
<p class="mole-result mole-mole-result">Mole whacked!</p>

.mole-game, .mole-jail {
  position: relative;
  float: left;
  width: 13em;
}
.mole-game {
  height: 6em;
  border: 0.125em solid #859fab;
  background-color: #d2dbe0;
  color: #000;
  text-align: center;
}
.mole-button {
  display: block;
  position: absolute;
  top: 1.5em;
  right: 1.5em;
  bottom: 1.5em;
  left: 1.5em;
  opacity: 0.8;
  cursor: pointer;
  user-select: none;
}
.mole-hole {
  margin: 0.5em;
  border: 0.15em solid #54a9ff;
  background-color: #cff0fb;
  line-height: 1.7em;
}
.mole-hole:hover {
  background-color: #54a9ff;
}
.mole-mole {
  border: 0.15em solid #d8e60a;
  background-color: #d3ddb5;
  line-height: 2.7em;
  left: 16em;
  right: -13em;
  animation-name: mole;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}
.mole-mole:hover {
  background-color: #d8e60a;
}
.mole-mole:active {
  animation-play-state: paused;
}
.mole-jail {
  height: 6.25em;
  margin-left: 1em;
  border-left: 0.15em dashed #000;
  opacity: 0.8;
  cursor: not-allowed;
}
.mole-result {
  display: none;
  clear: left;
  margin: 0 1em;
  padding: 1em 0;
}
.mole-hole-toggle:checked + .mole-hole-result,
.mole-mole-toggle:checked + .mole-mole-result {
  display: block;
}
body {
  color: #374952;
  font: 20px/1.5 'Titillium Web', sans-serif;
}
body, .mole-jail {
  background-color: #a6b8c1;
}
.toggle {
  display: none;
}
@keyframes mole {
  27.75% {
    left: 1.5em;
    right: 1.5em;
  }
  33.50% {
    left: 16em;
    right: -13em;
  }
  59.00% {
    left: 1.5em;
    right: 1.5em;
  }
  65.00% {
    left: 16em;
    right: -13em;
  }
  93.75% {
    left: 1.5em;
    right: 1.5em;
  }
  97.50% {
    left: 16em;
    right: -13em;
  }
}