.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.