.toggle  
  - for(let i = 1; i <= 5; i++)
    input(type="radio" name="toggle" id="toggle-" + i)
    label(for="toggle-" + i class="label-" + i)= i
View Compiled
$primary: #FF4081;

body {
  display: grid;
  place-content: center;
  height: 100vh;
}

.toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  
  input {
    display: none;
    
    @for $i from 1 through 5 {
      &#toggle-#{$i}:checked ~ .label-#{$i} {
        width: 6rem;
      }
    }
  }
  label {
    width: 4rem;
    height: 3rem;
    border-radius: 999px;
    background: $primary;
    cursor: pointer;
    transition: 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.