Cacher is the code snippet organizer for pro developers

@import "compass/css3";
@import "compass/reset";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
  
$base-font: 'Open Sans', sans-serif;

$side: 3em;
$duration: 1s;
$factor: 1.618;

$red: #cc0966;
$blue: #5EB9CC;
$green: #59c000;

$ok-color: $blue;
$ko-color: $red;

body {
    background-color: #d0d0d0;
    text-align: center;
    font-family: $base-font;
    font-size: 16px;
    color: #444444;
}

header {
    margin-bottom: 2em;
}

h1 {
    font-size: 2em;
    margin: 2em 0 1em;
}

strong {
    font-weight: 700;
}

legend {
		font-size: 1.5em;
    line-height: 1em;
		margin-bottom: 1.9em;
		padding-bottom: 1.5em;
		border-bottom: 1px solid #444444;
    width: 100%;
}

div {
    margin-bottom: 1em;
}

fieldset{
    border: 0;
    padding: 0 2em 2em;
}

.pure-toggle {
    cursor: pointer;
    font-size: 1.5em;
    width: $side * 2;
    height: $side;
    display: inline-block;
    position: relative;
    background: white;
    text-align: left;
    line-height: $side;
    @include box-sizing(border-box);
    @include perspective(300px);
    &:before {
        width: $side;
        height: $side;
        position: absolute;
        right: 0;
        top: 0;
        background-color: #f5f5f5;
        display: inline-block;
        text-align: center;
        font-family: 'FontAwesome', sans-serif;
        content: "···";
        color: #ffffff;
        @include transition(all $duration ease-in-out);
        @include transform-origin(0%, 50%);
        /*@include box-shadow(0.1em 0 0.2em rgba(0,0,0,0.3));*/
    }
    [class^='fontawesome-'] {
        padding: 1em;
        line-height: inherit;
        font-family: 'FontAwesome', sans-serif;
        @include transition(all $duration ease-in-out)
    }
    &.flip:before {
        @include transform-origin(50%, 50%);
    }
    &.brick {
        $brickColor: white;
        background-color: $brickColor;
        border: 1px solid  darken($brickColor, 15);
        border-bottom-color: darken($brickColor, 10);
        @include box-shadow(
            inset 0 0.1em 0.03em rgba(0,0,0,0.2)
            ,inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3)
            ,0 0 2em rgba($brickColor,0.6)
        );
        &:before {
            margin-right: -1px;
            margin-top: -0.14em;
            $volumeColor: darken($ok-color, 10);
            @include box-shadow(
                 0 0.12em 0.01em rgba($volumeColor,1)
                ,0 0.12em 0.3em rgba($volumeColor,0.6)
                ,0 0.12em 2em rgba(0, 0, 0, 0.3)
                ,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2)
            );
            @include transition-duration($duration/1.5);
            @include transition-timing-function(cubic-bezier(0.52,-0.41, 0.55, 1.46));
        }
        &.switch {
            background: transparent;
            @include box-shadow(
                inset 0 0 0.03em rgba(0,0,0,0)
                ,inset 0 0 0.3em rgba(0, 0, 0, 0)
                ,0 0 2em rgba($brickColor,0)
            );
            border: 0;
            &:before {
                display: none;
            }
            .ok {
                color: white;
                top: 0;
                left: 1px;
                line-height: 1em;
                padding: 1em 1.045em;
                position: relative;
                background: $ok-color;
                $volumeColor: darken($ok-color, 10);
                @include box-shadow(
                     0 0.12em 0.01em rgba($volumeColor,1)
                    ,0 0.12em 0.3em rgba($volumeColor,0.6)
                    ,0 0.12em 2em rgba(0, 0, 0, 0.3)
                    ,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2)
                );
                @include transition-duration($duration/3);
                &.no {
                    top: 0.14em;
                    background: transparent;
                    background: $ko-color;
                    $volumeColor: darken($ko-color, 10);
                    @include box-shadow(
                        0 0 0.01em rgba($volumeColor,1)
                        ,0 0 0.3em rgba($volumeColor,0.6)
                        ,0 0.12em 2em rgba(0, 0, 0, 0)
                        ,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0)
                    );
                }
            }
        }
    }
}
input[type='checkbox'] + .pure-toggle {
    &:before {
        @include transform(rotateY(0deg));
        background-color: $ok-color;
    }
    [class^="fontawesome-"],
    [class*="fontawesome-"] {
        color: $ok-color;
    }
    &.wide:before {
        @include transform(rotateY(0deg));
        @include animation(contract ($duration) ease-in-out forwards);
    }
    &.brick {
        &:before {
            border-bottom: 0.03em solid lighten($ok-color, 05);
            text-shadow: 0 0.05em 0 darken($ok-color, 05);
            @include transform(rotateY(0deg));
        }
        &.switch .ok {
            color: white;
        }
    }
    &.flip:before {
        @include animation(flip ($duration/2) ease-in-out forwards);
    }
    &.impossible:before {
        @include animation(impossible ($duration/2) ease-in-out forwards);
    }
}
input[type='checkbox']:checked + .pure-toggle {
    &:before {
        @include transform(rotateY(-180deg));
        background-color: $ko-color;
    }
    [class^="fontawesome-"],
    [class*="fontawesome-"] {
        color: $ko-color;
    }
    &.wide:before {
        @include transform(rotateY(0deg));
        @include animation(expand ($duration) ease-in-out forwards);
    }
    &.brick {
        &:before {
            margin-right: $side;
            border-bottom: 0.03em solid lighten($ko-color, 10);
            text-shadow: 0 0.05em 0 darken($ko-color, 10);
            @include transform(rotateY(0deg));
            $volumeColor: darken($ko-color, 10);
            @include box-shadow(
                 0 0.12em 0.01em rgba($volumeColor,1)
                ,0 0.12em 0.3em rgba($volumeColor,0.6)
                ,0 0.12em 2em rgba(0, 0, 0, 0.3)
                ,0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2)
            );
        }
        &.switch {
            &:before {
                display: none;
            }
            .ok {
                top: 0.14em;
                $volumeColor: darken($ok-color, 10);
                @include box-shadow(
                     0 0 0.01em rgba($volumeColor,1)
                    ,0 0 0.3em rgba($volumeColor,0.6)
                    ,0 0.12em 2em rgba(0, 0, 0, 0)
                    ,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0)
                );
                &.no {
                    top: 0;
                    background: $ko-color;
                    $volumeColor: darken($ko-color, 10);
                    @include box-shadow(
                         0 0.12em 0.01em rgba($volumeColor,1)
                        ,0 0.12em 0.3em rgba($volumeColor,0.6)
                        ,0 0.12em 2em rgba(0, 0, 0, 0.3)
                        ,0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2)
                    );
                }
            }
        }
    }
    &.flip:before {
        @include animation(flip-back ($duration/2) ease-in-out forwards);
    }
    &.impossible:before {
        @include animation(impossible-back ($duration/2) ease-in-out forwards);
    }
}

@keyframes flip-back {
    0%{
        @include transform(rotateY(0deg) translateX(0) scale(1));
    }
    60%,
    80%{
        @include transform(rotateY(-360deg) translateX(0) scale(1.3));
    }
    100%{
        margin-right: $side;
        @include transform(rotateY(-360deg) translateX(0) scale(1));
    }
}

@keyframes flip {
    0%{
        margin-right: $side;
        @include transform(rotateY(0deg) translateX(0) scale(1));
    }
    60%,
    80%{
        @include transform(rotateY(360deg) translateX(0) scale(1.3));
    }
    100%{
        margin-right: 0;
        @include transform(rotateY(360deg) translateX(0) scale(1));
    }
}
@keyframes impossible-back {
    0%{
        @include transform(rotateX(0deg) translateX(0) scale(1));
    }
    60%,
    80%{
        @include transform(rotateX(-360deg) translateX(0) scale(1.3));
    }
    100%{
        margin-right: $side;
        @include transform(rotateX(-360deg) translateX(0) scale(1));
    }
}

@keyframes impossible {
    0%{
        margin-right: $side;
        @include transform(rotateX(0deg) translateX(0) scale(1));
    }
    60%,
    80%{
        @include transform(rotateX(360deg) translateX(0) scale(1.3));
    }
    100%{
        margin-right: 0;
        @include transform(rotateX(360deg) translateX(0) scale(1));
    }
}

@keyframes expand {
    0%{
        right: 0;
        width: $side;
    }
    25%{
        right: 0;
        width: 100%;
    }
    50%{
        right: auto;
        width: 100%;
        left: 0;
    }
    100%{
        left: 0;
        width: $side;
    }
}

@keyframes contract {
    0%{
        left: 0;
        width: $side;
    }
    25%{
        left: 0;
        width: 100%;
    }
    50%{
        right: 0;
        width: 100%;
        left: auto;
    }
    100%{
        right: 0;
        width: $side;
    }
}
@-webkit-keyframes flip-back {
    0%{
        @include transform(rotateY(0deg) translateX(0) scale(1));
    }
    60%,
    80%{
        @include transform(rotateY(-360deg) translateX(0) scale(1.3));
    }
    100%{
        margin-right: $side;
        @include transform(rotateY(-360deg) translateX(0) scale(1));
    }
}

@-webkit-keyframes flip {
    0%{
        margin-right: $side;
        @include transform(rotateY(0deg) translateX(0) scale(1));
    }
    60%,
    80%{
        @include transform(rotateY(360deg) translateX(0) scale(1.3));
    }
    100%{
        margin-right: 0;
        @include transform(rotateY(360deg) translateX(0) scale(1));
    }
}
@-webkit-keyframes impossible-back {
    0%{
        @include transform(rotateX(0deg) translateX(0) scale(1));
    }
    60%,
    80%{
        @include transform(rotateX(-360deg) translateX(0) scale(1.3));
    }
    100%{
        margin-right: $side;
        @include transform(rotateX(-360deg) translateX(0) scale(1));
    }
}

@-webkit-keyframes impossible {
    0%{
        margin-right: $side;
        @include transform(rotateX(0deg) translateX(0) scale(1));
    }
    60%,
    80%{
        @include transform(rotateX(360deg) translateX(0) scale(1.3));
    }
    100%{
        margin-right: 0;
        @include transform(rotateX(360deg) translateX(0) scale(1));
    }
}

@-webkit-keyframes expand {
    0%{
        right: 0;
        width: $side;
    }
    25%{
        right: 0;
        width: 100%;
    }
    50%{
        right: auto;
        width: 100%;
        left: 0;
    }
    100%{
        left: 0;
        width: $side;
    }
}

@-webkit-keyframes contract {
    0%{
        left: 0;
        width: $side;
    }
    25%{
        left: 0;
        width: 100%;
    }
    50%{
        right: 0;
        width: 100%;
        left: auto;
    }
    100%{
        right: 0;
        width: $side;
    }
}

<body class="content">
  <header>
    <h1>Pure <strong>CSS</strong> Toggles</h1>
  </header>
  <form>
    <fieldset>
      <legend>Flat look</legend>
      <div>
        <input type="checkbox" id="pure-toggle-0" hidden/>
        <label class="pure-toggle" for="pure-toggle-0"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
      </div>
      <div>
        <input type="checkbox" id="pure-toggle-1" hidden checked="checked" />
        <label class="pure-toggle flip" for="pure-toggle-1"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
      </div>
      <div>
        <input type="checkbox" id="pure-toggle-2" hidden />
        <label class="pure-toggle impossible" for="pure-toggle-2"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
      </div>
      <div>
        <input type="checkbox" id="pure-toggle-3" hidden checked="checked" />
        <label class="pure-toggle wide" for="pure-toggle-3"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
      </div>
    </fieldset>
    <fieldset>
      <legend>3D look</legend>
      <div>
        <input type="checkbox" id="pure-toggle-4" hidden />
        <label class="pure-toggle brick" for="pure-toggle-4"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
      </div>
      <div>
        <input type="checkbox" id="pure-toggle-5" hidden />
        <label class="pure-toggle brick switch" for="pure-toggle-5"><span class="fontawesome-ok ok"></span><span class="fontawesome-remove no ok"></span></label>
      </div>
    </fieldset>
  </form>
</body>