What we want to do now, basically, is to change the text of the label from OFF to ON and remove the
box-shadow
mask in order to expose a background color that we'll use to simulate a light propagating from the button.
#old_panel input:checked + label:not(:active):after{ content: 'ON'; background-clip: border-box; box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset, 0px -11px 0px rgba(0,0,0,0.4) inset, -3px 9px 0px 0px black, 3px 9px 0px 0px black, 0px 10px 0px 0px rgba(255,255,255,0.3), -4px 9px 0px 0px rgba(255,255,255,0.3), 4px 9px 0px 0px rgba(255,255,255,0.3); } #old_panel input:checked + label:not(:active):before{ background-image: -moz-radial-gradient(50% 57%, circle, rgba(150,130,90,0.0), rgba(150,130,90,0.3) 40px, rgb(150,130,90) 55px); background-image: radial-gradient(50% 57%, circle, rgba(150,130,90,0.0), rgba(150,130,90,0.3) 40px, rgb(150,130,90) 55px); }
We don't want to...