CSS
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background: #2b2b2b;
}
label{
position: relative;
margin: 5px 0;
cursor: pointer;
}
label input{
appearance: none;
display: none;
}
label span{
position: relative;
display: block;
width: 80px;
height: 40px;
background: #222;
border-radius: 40px;
box-shadow: inset 0 2px 15px rgba(0,0,0,0.2),
inset 0 2px 2px rgba(0,0,0,0.2),
inset 0 -1px 1px rgba(0,0,0,0.2);
}
label .indicator{
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
background: linear-gradient(to bottom, #444, #222);
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.5),
inset 0 1px 1px rgba(255,255,255,0.1);
transition: 0.5s;
transform: scale(0.9);
}
label input:checked ~ .indicator{
left: 40px;
}
label .indicator::before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 5px;
height: 5px;
background: #f00;
border-radius: 50%;
transition: 0.5s;
box-shadow: 0 0 2px #f00,
0 0 5px #f00,
0 0 10px #f00,
0 0 15px #f00,
0 0 20px #f00,
0 0 25px #f00,
0 0 30px #f00,
0 0 40px #f00;
}
label input:checked ~ .indicator::before{
background: #0f0;
box-shadow: 0 0 2px #0f0,
0 0 5px #0f0,
0 0 10px #0f0,
0 0 15px #0f0,
0 0 20px #0f0,
0 0 25px #0f0,
0 0 30px #0f0,
0 0 40px #0f0;
}