<input type="radio" name="menu" id="one"checked/>
<label for="one">Melodic & Quiet</label>
<input type="radio" name="menu" id="two"/>
<label for="two">Fresh & Festive</label>
<input type="radio" name="menu" id="three"/>
<label for="three">Deep & Subtle</label>
<input type="radio" name="menu" id="four"/>
<label for="four">Dark & Sink</label>
<div class="wheel">
<div class="area one"></div>
<div class="area two"></div>
<div class="area four"></div>
<div class="area three"></div>
</div>body {background:#fff;
body {background:#fff;
text-align:center;
}
input[type='radio'] {display:none;}
label {cursor:pointer;
display:block;
float:left;
color:#fff;
width:120px;
margin:10px 3px 0 5px;
padding:3px 10px;
border-radius:5Px;
text-align:center;
}
label[for="one"] {background:#1CABE7;}
label[for="two"] {background:#FE0000;}
label[for="three"] {background:#FDB128;}
label[for="four"] {background:#171717;}
.wheel {position:absolute;
left:0;
right:0;
margin:100px auto;
height:450px;
width:450px;
border-radius:218px;
transition:.5s;
transition:.5s;
transition:.5s;
transition:.5s;
}
.wheel:before {
content:'';
position:absolute;
left:0;
right:0;
margin:97px auto;
display:block;
width:240px;
height:240px;
border-radius:400px;
border:2px solid #fff;
background:#fff;
}
.area {float:left;
width:220px;
height:220px;
background:rgba(4,4,4,0.05);
margin-right:2px;
margin-bottom:2px;
transition:.5s;
transition:.5s;
transition:.5s;
transition:.5s;
}
.one {border-radius:450px 0 0 0;}
.two {border-radius:0 450px 0 0;}
.three {border-radius:0 0 450px 0;}
.four {border-radius:0 0 0 450px;}
#one:checked ~.wheel {
transform: rotate(-45deg);
}
#one:checked ~.wheel .one {
background:#1CABE7;
}
#two:checked ~.wheel {
transform: rotate(-135deg);
}
#two:checked ~.wheel .two {
background:#FE0000;
}
#three:checked ~.wheel {
transform: rotate(-225deg);
}
#three:checked ~.wheel .three {
background:#FDB128;
}
#four:checked ~.wheel {
transform: rotate(-315deg);
}
#four:checked ~.wheel .four {
background:#171717;
}