HTML
<form id="num1" class=""><fieldset><legend>Who invented JavaScript?</legend><div class="btns" aria-label="Choose your answer"><input type="radio" id="keya1" name="val0"><label for="keya1">Douglas Crockford</label></div><div class="btns" aria-label="Choose your answer"><input type="radio" id="keyb1" name="val0"><label for="keyb1">Sheryl Sandberg</label></div><div class="btns" aria-label="Choose your answer"><input type="radio" id="keyc1" name="val0" checked><label for="keyc1">Brendan Eich</label></div></fieldset></form>
CSS
.quiz-cont form {
top: 0;
left: 50%;
opacity: 0;
transition: .6s opacity;
transform: translateX(-50%);
}
fieldset {
border: 0;
padding: 0;
margin: 0;
}
fieldset>div {
border: 4px solid #fff;
margin: 4px 0;
border-radius: 30px;
position: relative;
display: block;
}
label {
z-index: 1;
cursor: pointer;
line-height: 1;
padding: 1em 4em;
display: block;
position: relative;
border-radius: 24px;
}
legend {
padding: 1em 0;
}
.btns input {
display: none;
}
.btns label::after,
.btns label::before {
content: "";
display: block;
position: absolute;
box-sizing: border-box;
left: 0;
top: 50%;
transform-origin: 24px 24px;
backface-visibility: hidden;
}
.btns label::before {
border: 4px solid #777;
border-radius: 24px;
transform: translateY(-50%);
padding: 20px;
background: #aaa;
}
.btns label::after {
opacity: 0;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: padding-right .1s, border-right-color 0s .2s;
transform: translateY(-50%) rotate(45deg);
}
.btns input:checked~label::before {
background: #9dff90;
}
.btns input:checked~label::after {
border-color: #777;
padding: 10px;
opacity: 1;
}
.btn input:checked~label::after {
background: #777;
padding: 4px;
border-radius: 14px;
top: 31px;
opacity: 1;
}
