CSS
body{
display: flex;
}
label{
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
}

label .btn{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1b1b1b;
border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 1),
inset 0 -2px 5px rgba(0, 0, 0, 1),
0 0 0 2px #000,
0 0 0 5px #0c0c0c,
inset 0 2px 2px rgba(255, 255, 255, 0.5),
0 0 0 5.5px #080808;
}


label input[type="checkbox"]:checked ~ .btn{
box-shadow: 0 0 0 rgba(0, 0, 0, 1),
inset 0 1px 1px rgba(255, 255, 255, 0.1),
0 0 0 2px #000,
0 0 0 5px #0c0c0c,
inset 0 -2px 5px rgba(0, 0, 0, 1),
0 0 0 5.5px #00a1ff;
}
label input[type="checkbox"]{
-webkit-appearance : none;
}

label .fa{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
color: #0c0c0c;
}
label input[type="checkbox"]:checked ~ #icon{
color: #00ffe7;
text-shadow: 0 0 15px #00a1ff,
0 0 30px #00a1ff;
}