<div class="wrap">
<input type="radio" id="rad1" name="rads">
<label for="rad1"></label>
<input type="radio" id="rad2" name="rads" >
<label for="rad2"></label>
<input type="radio" id="rad3" name="rads">
<label for="rad3"></label>
</div>
body {
background: #75FF75;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
input {
display: none;
}
label {
cursor: pointer;
margin: 10px 10px;
}
label:before {
content: '';
display: inline-block;
height: 30px;
width: 30px;
background: #59CA59;
border-radius: 50%;
z-index: 2;
transition: box-shadow .4s ease,
background .3s ease;
}
input:checked + label:before {
box-shadow: inset 0px 3px 0 2px rgba(89,202,89,1);
background: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.