* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
display: grid;
grid-template-columns: repeat(3, 8em);
background: #242526;
}
label {
position: relative;
width: 80px;
height: 80px;
cursor: pointer;
border-radius: 50%;
margin: 0 20px;
}
label .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 4px rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
inset 0 -1px 5px rgba(255, 255, 255,.7) , 0 0 2px 2px #000,
0 0 2px 0px #0F0F0F;
border-radius: 50%;
background: #1A1A1A;
}
label input[type='checkbox'] {
-webkit-appearance: none;
}
label input[type='checkbox']:checked ~ .btn
{
box-shadow: 0 0 0 rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
inset 1px 1px rgba(255, 255, 255,.1), 0 0 0 2px #000,
0 0 0 3px #0F0F0F, 0 0 15px 8px #00B9DE;
font-size: 10px;
}
label input[type='checkbox']:checked ~ .fa {
color: #00B9DE;
text-shadow: 0 0 13px #00B9DE,
0 0 25px #00B9DE;
}
label input[type='checkbox']:checked ~ .fab {
color: #00B9DE;
text-shadow: 0 0 13px #00B9DE,
0 0 25px #00B9DE;
}
label input[type='checkbox']:checked ~ .fas {
color: #00B9DE;
text-shadow: 0 0 13px #00B9DE,
0 0 25px #00B9DE;
}
label .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 2.1em;
}
label .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 2.2em;
}
label .fa-plane {
font-size: 1.9em;
}
label .fa-bell {
font-size: 1.9em;
}
label .fa-battery-full {
font-size: 1.9em;
}
label .fa-wifi {
font-size: 1.9em;
}