<input type="checkbox" id="play-pause" /><label for="play-pause" id="play-pause-label" class="win-button"></label>

$white: #FAFAFA;
$black: #2A2A2A;
$gray: lightgrey;
$background: $black;

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background: $background;
  color: $white;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 6rem;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

#play-pause {
    display: none;
}

label {
    cursor: pointer;
}

#play-pause:checked + #play-pause-label::after {
    content: '❙❙';
}

#play-pause-label::after {
    content: '►';
}