Sweet & Pure CSS3 UISwitch

index.html

<div class="wrapper">
        <h1>CSS3 UISwitch Example</h1>

        <section id="fields" class="fields section">
            <div class="fields__item">
                <input type="checkbox" class="uiswitch">
                <h6>Off (unchecked)</h6>
            </div>
            <div class="fields__item">
                <input type="checkbox" class="uiswitch" checked>
                <h6>On (checked)</h6>
            </div>

            <div class="fields__item">
                <input type="checkbox" class="uiswitch" disabled>
                <h6>Disabled Off</h6>
            </div>

            <div class="fields__item">
                <input type="checkbox" class="uiswitch" checked disabled>
                <h6>Disabled On</h6>
            </div>

            <div class="fields__item">
                <input type="checkbox" class="uiswitch custom">
                <h6>Custom</h6>
            </div>

            <div class="fields__item">
                <input type="checkbox" class="uiswitch my-switch">
                <h6>Custom</h6>
            </div>
        </section>

        <section id="usage" class="section">
            <p>It's a one liner!</p>
            <pre><code>&lt;input type="checkbox" class="uiswitch"&gt;</code></pre>
            <p>Or just use SCSS and customize it too!</p>
            <pre><code>import 'uiswitch';

$uiswitch-thumb-tint: #ffffff;
$uiswitch-on-tint: red;</code></pre>
        </section>
    </div>

script.js

// Read more @ https://github.com/fnky/css3-uiswitch

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "bourbon";

// UISwitch2
// A customizable UISwitch in pure CSS3.
//
// @author Christian Petersen <chrs@cbp.io>

$uiswitch-thumb-tint: #ffffff !default;
$uiswitch-on-tint: #4CD964 !default;

$uiswitch-active-tint: #e5e5e5 !default;
$uiswitch-on-tint-start: $uiswitch-on-tint !default;
$uiswitch-on-tint-end: desaturate($uiswitch-on-tint-start, 1) !default;
$uiswitch-off-tint: #ffffff !default;

%uiswitch {
    @include box-sizing(border-box);
    @include appearance(none);
    @include user-select(none);
    @include size(51px 31px);
    position: relative;
    border-radius: 16px;
    cursor: pointer;
    outline: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    background-color: $uiswitch-active-tint;
    @include transition-duration(600ms);
    @include transition-timing-function(ease-in-out);
  
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;

    // Background
    &::before {
        @include box-sizing(border-box);
        @include size(47px 27px);
        content: ' ';
        position: absolute;
        left: 2px;
        top: 2px;
        background-color: $uiswitch-off-tint;
        border-radius: 16px;
        z-index: 1;
        @include transition-duration(300ms);
        @include transform(scale(1));
    }

    // Thumb
    &::after {
        @include box-sizing(border-box);
        @include size(27px);
        content: ' ';
        position: absolute;
        border-radius: 27px;
        background: $uiswitch-thumb-tint;
        z-index: 2;
        top: 2px;
        left: 2px;
        box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25),
                    0px 4px 11px 0px rgba(0,0,0,0.08),
                    -1px 3px 3px 0px rgba(0,0,0,0.14);
        @include transition(transform 300ms, width 280ms);
        @include transform(translate3d(0, 0, 0));
        @include transition-timing-function(cubic-bezier(0.42, 0.800, 0.58, 1.2));
    }

    // Background tint for ON state
    &:checked {
        @include linear-gradient(-180deg, $uiswitch-on-tint-start 0%, $uiswitch-on-tint-end 100%);
    }

    // Thumb for ON state
    &:checked::after {
        @include transform(translate3d(16px, 0, 0));
        right: 18px;
        left: inherit;
    }

    // Thumb for active state
    &:active::after {
        width: 35px;
    }

    &:checked::before,
    &:active::before {
        @include transform(scale(0));
    }

    // Disabled
    &:disabled {
        opacity: 0.5;
        cursor: default;
        @include transition(none);

        &:active::before,
        &:active::after,
        &:checked:active::before,
        &:checked::before {
            width: 27px;
            @include transition(none);
        }

        &:active::before {
            @include size(41px 27px);
            @include transform(translate3d(6px, 0, 0));
        }

        &:checked:active::before {
            @include size(27px);
            @include transform(scale(0));
        }
    }
}

@mixin uiswitch($on-tint: $uiswitch-on-tint,
                $thumb-tint: $uiswitch-thumb-tint,
                $off-tint: $uiswitch-off-tint,
                $active-tint: $uiswitch-active-tint) {

    @extend %uiswitch;
    background-color: $active-tint;

    $on-tint-start: $on-tint;
    $on-tint-end: desaturate($on-tint-start, 1);

    &::before {
        background-color: $off-tint;
    }

    &::after {
        background: $thumb-tint;
    }

    &:checked {
        @include linear-gradient(-180deg, $on-tint-start 0%,
                                $on-tint-end 100%);
    }

}

// Make .uiswitch class available out of the box
.uiswitch {
    @include uiswitch();
}

// DEMO STUFF
body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-color: #ffffff;
        }

        p {
            font-size: 18px;
            font-weight: 300;
        }

        pre, code {
            font-family: Monaco, Menlo, "Courier New", Courier, monospace;
            font-size: 13px;
        }

        pre {
            text-align: left;
        }

        pre {
            background-color: #fbfbfb;
            border: 1px solid #eee;
            padding: .6em;
            display: inline-block;
            border-radius: 3px;
        }

        .wrapper {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }

        h1 {
            font-weight: 200;
            text-align: center;
            margin: 2em;
        }

        .fields {}

        .fields__item {
            display: inline-block;
            margin-right: 1.875em;
            text-align: center;
        }

        h6 {
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: #aaa;
            margin: 1em;
        }

        .section {
            margin: 2em auto;
        }

        .custom { background-color: #eadcbc; }
        .custom::before { background-color: #f7f2e5; }
        .custom::after { background: #fff3a6; }
        .custom:checked {
            background-color: #ffca3f; background-image: -webkit-linear-gradient(-90deg, #ffca3f 0%, #feca40 100%);
            background-image: linear-gradient(-180deg,#ffca3f 0%, #feca40 100%);
        }

        .my-switch {
          border-radius: 4px; }
          .my-switch::before {
            border-radius: 2px; }
          .my-switch::after {
            border-radius: 1px; }
          .my-switch:checked {
            background: hotpink; }
          .my-switch:checked::after {
            background-color: #333; }

Sweet & Pure CSS3 UISwitch.markdown

Sweet & Pure CSS3 UISwitch

A pretty sweet and pure CSS3 iOS 7 UISwitch.

Forked from Christian Petersen's Pen Sweet & Pure CSS3 UISwitch.

A Pen by Jordan Halvorsen on CodePen.

License.