<input id="double-click-single-0-toggle" class="toggle double-click-toggle double-click-single-0-toggle" type="radio" name="double-click-state" />
<input id="double-click-single-1-toggle" class="toggle double-click-toggle double-click-single-1-toggle" type="radio" name="double-click-state" />
<input id="double-click-double-toggle" class="toggle double-click-toggle double-click-double-toggle" type="radio" name="double-click-state" />
<span class="button double-click-button">
  <label class="double-click-label double-click-none" for="double-click-single-0-toggle">Click Fast</label>
  <label class="double-click-label double-click-single-0 double-click-unmask" for="double-click-double-toggle">Single-Clicked</label>
  <label class="double-click-label double-click-single-0 double-click-mask" for="double-click-single-1-toggle">Single-Clicked</label>
  <label class="double-click-label double-click-single-1 double-click-unmask" for="double-click-double-toggle">Single-Clicked</label>
  <label class="double-click-label double-click-single-1 double-click-mask" for="double-click-single-0-toggle">Single-Clicked</label>
  <label class="double-click-label double-click-double double-click-unmask" for="double-click-double-toggle">Double-Clicked</label>
  <label class="double-click-label double-click-double double-click-mask" for="double-click-single-0-toggle">Double-Clicked</label>
</span>

body {
  margin: 0;
  background-color: #161819;
  font: 20px/1.5 'Titillium Web', sans-serif;
}
.button {
  display: inline-block;
  border: 0.1em solid #444f55;
  border-radius: 0.3em;
  padding: 0.5em;
  background-color: #617078;
  color: #3d484c;
  text-align: center;
  font-size: 1em;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
.button:hover {
  background-color: #6f828b;
}
.button:active {
  background-color: #546269;
}
.toggle {
  display: none;
}
.double-click-button {
  position: relative;
  margin: 2em;
  padding: 0;
  width: 8em;
  height: 2em;
}
.double-click-label,
.double-click-toggle:checked ~ .double-click-button .double-click-none {
  display: none;
}
.double-click-none,
.double-click-single-0-toggle:checked ~ .double-click-button .double-click-single-0,
.double-click-single-0-toggle:checked ~ .double-click-button .double-click-single-0,
.double-click-single-1-toggle:checked ~ .double-click-button .double-click-single-1,
.double-click-double-toggle:checked ~ .double-click-button .double-click-double {
  display: block;
}
.double-click-label {
  position: absolute;
  right: -0.1em;
  left: -0.1em;
  line-height: 2.2em;
  cursor: pointer;
  animation-duration: 400ms;
  animation-timing-function: step-end;
}
.double-click-mask {
  top: -0.1em;
  animation-name: mask;
}
.double-click-unmask {
  top: -8em;
  animation-name: unmask;
}
@keyframes mask {
  0% {
    top: -8em;
  }
  100% {
    top: -0.1em;
  }
}
@keyframes unmask {
  0% {
    top: -0.1em;
  }
  100% {
    top: -8em;
  }
}