<h1>TURN ME ON !</h1>

<div id="switch">
    <input id="on" type="radio" name="sw"/>
    <label for="off" class="on-lbl">I</label>
        
    <input checked="true" id="off" type="radio" name="sw"/>
    <label for="on" class="off-lbl">0</label>
</div>

<footer>
  Thank you
  <a href="https://codepen.io/devi8/">Chris Cifonie</a>
  for your
  <a href="https://codepen.io/devi8/pen/lvIeh">Color Inspiration</a>
</footer>

body {
    margin: 0;
    padding: 0;
    background-image: URL('https://subtlepatterns.com/patterns/white_carbon.png');
    font-family: sans-serif;
    text-align: center;
}
h1 {
    text-shadow: -3px 0px 0px #434A54;
    color: #ED5565;
    font-size: 3em;
}

#switch {
    margin: 0 auto;
    width: 50px;
    font-family: sans-serif;
    background: linear-gradient(to bottom, #ED5565 50%, #DA4453 50%);
    border: solid 10px #434A54;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 20px white;
}
#switch > label {
    display: block;
    padding: 10px;
    width: 30px;
    text-align: center;
    color: white;
    font-size: 1em;
}

input[type="radio"] {
    display: none;
}

label.on-lbl {
    background-color: #DA4453;
}
label.off-lbl {
    background-color: #ED5565;
}

input[type="radio"]:checked + label.on-lbl {
    transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -webkit-transform: skew(-20deg);
    margin-left: 7px;
    cursor: pointer;
}
input[type="radio"]:checked + label.off-lbl {
    transform: skew(20deg); 
    -o-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -webkit-transform: skew(20deg);
    margin-left: 7px;
    cursor: pointer;
}

footer {
    margin-top: 100px;
}
a {
    text-decoration: none;
    color: #4A89DC;
    font-weight: bold;
}