body{
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
background-color: #060606;
height:100vh;
}
ul{
position: relative;
margin: 0px;
padding: 0px;
display: flex;
}
ul li{
position: relative;
list-style: none;
width: 100px;
text-align: center;
}
ul li label{
position: relative;
}
ul li label i,
ul li label input[type="checkbox"]
{
display: block;
text-align: center;
}
ul li label i.fa{
font-size: 40px;
color: #222;
transition: 0.5s;
}
ul li label input[type="checkbox"]
{
position: absolute;
opacity: 0;
cursor:pointer;
}
ul li label .check
{
position: relative;
display: block;
width: 50px;
height: 50px;
background: linear-gradient(#000,#333)
border-radius: 50%;
margin: 10px auto 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
ul li label .check:before{
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background:#1b1b1b;
transition: 0.5s;
z-index: 3;
}
ul li label .check:after{
content: '';
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
background: #222;
border-radius: 50%;
z-index: 2;
border: 2px solid #161616;
}
ul li label input[type="checkbox"]:checked ~ .check:before{
background: rgba(0,176,255,1);
box-shadow: 0 0 10px rgba(0,176,255,1),
0 0 15px rgba(0,176,255,1),
0 0 20px rgba(0,176,255,1),
0 0 25px rgba(0,176,255,1),
0 0 0 2px rgba(0,176,255,.1);
}
ul li label input[type="checkbox"]:checked ~ i.fa
{
color: rgb(0,176,255,1);
}