N1 switch

by Andrew Dunai

HTML

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:100/style.css">
<h1>Sexy N1 switch!</h1>

<input type="checkbox" name="foo" value="bar" id="the-switch" class="switch" onchange="$('#form-123').submit()" /> 
<label for="the-switch"></label>

CSS

body { background: #24333A; color: #D92C67; font-family: Roboto; font-weight: 100; padding: 20px; }
h1 { margin: 0 0 20px; padding: 0; }

input.switch {
    display: none;
}

input.switch + label {
    display: block;
    position: relative;
    box-sizing: border-box;
    
    cursor: pointer;
    width: 50px;
    height: 30px;
    background: #01CBE1;
    border-radius: 15px;
    transition: background 0.15s ease-out;
}

input.switch + label:after {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: 26px;
    border-radius: 15px;
    transition: left 0.15s ease-out;
    background: #233339;
}

input.switch:checked + label {
    background: #D92C67;
}

input.switch:checked + label:after {
    left: 22px;
}