<div class="radio">

  <label class="radioPole">
    <input type="radio" name="3d" checked>
    <div class="radioPole_label">Radio <s>button</s> pole 1</div>
    <div class="radioPole_layers">
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
  </label>

  <label class="radioPole">
    <input type="radio" name="3d">
    <div class="radioPole_label">Radio <s>button</s> pole 2</div>
    <div class="radioPole_layers">
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
  </label>

  <label class="radioPole">
    <input type="radio" name="3d">
    <div class="radioPole_label">Radio <s>button</s> pole 3</div>
    <div class="radioPole_layers">
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
  </label>

  <label class="radioPole">
    <input type="radio" name="3d" disabled>
    <div class="radioPole_label">Disabled button</div>
    <div class="radioPole_layers">
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
  </label>

  <label class="radioPole">
    <input type="radio" name="3d">
    <div class="radioPole_label">Radio <s>button</s> pole 4</div>
    <div class="radioPole_layers">
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
  </label>

</div>

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Ubuntu', sans-serif;
  background-color: #ddd;
  color: #000;
  min-height: 100vh;
  margin: 0;
  padding: 3em 1em;
  display: grid;
  place-items: center;
  perspective: 6em;
  
  *:not(:empty) {
    transform-style: preserve-3d;
  }
}


.radio {
  scale: 3;
}

.radioPole {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
  // --hue: 0; 

  &:active > &_layers {
    height: 0.25em;
  }

  &_label {
    padding: 0.25em 0.25em 0.25em 1.5em;
  }

  & > input {
    appearance: none;
    position: fixed;
    left: -100vmax; top: -100vmax;

    &:checked {
      & ~ .radioPole_layers {
        --saturation: 100%;
        --checkLight: -40%;
        height: 0.6em;
      }
    }

    &:disabled {
      & ~ * {
        cursor: not-allowed;
      }

      & ~ .radioPole_layers {
        height: 0;

        & > div {
          --light: 75%;
          box-shadow: none;

          &:nth-child(n + 2) {
            display: none;
          }
        }
      }
    }

    &:focus-visible {
      & ~ .radioPole_label {
        outline: 1px #000 solid;
      }
    }
  }

  &_layers {
    position: absolute;
    left: 0.25em; bottom: 50%;
    width: 1em; height: 1em;
    transform: rotateX(-90deg);
    transform-origin: bottom;
    transition: height 0.25s;

    & > div {
      position: absolute;
      left: 0; top: var(--top, 0);
      width: 1em; height: 1em;
      border-radius: 50%;
      background-color: hsl(var(--hue, 120), var(--saturation, 0%), calc(var(--light) + var(--checkLight, 0%)));
      transform: translateY(-50%) rotateX(90deg);
      transition: background-color 0.5s var(--tDelay, 0s);

      @for $i from 0 through 20 {
        &:nth-child(#{$i + 1}) {
          --top: #{$i * 5%};
          --light: #{80% - $i * 1%};
          --tDelay: #{0.20s - $i * 0.01s};
        }
      }

      &:nth-child(1) {
        box-shadow: 0 0 0.25em #fff7 inset;
      }
      &:nth-child(21) {
        box-shadow: 0 0 0.25em #0007;
      }
    }
  }
}

s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}