A Pen by Jason Weaver.

expswitch.markdown

expswitch

Really liked this switch on Dribbble. Wanted to see if I could make an all css version.

A Pen by Jason Weaver on CodePen.

License.

index.jade

main(role="main")
  form
    label(for="updatecheck") On or Off?
      span
      span
    input#updatecheck(type="checkbox")

script.coffee

$ ->

RB = ->

# switch
RB.switch = ->
  $("input[type=checkbox]").on('change', ->
    $('label').toggleClass('checked')
  )

# doc ready
$(document).ready ->
  RB.switch()

style.scss

@import "compass";
// --- Variables
// ---------------------------------------------------

// color
$color-1: #efece9; // light tan
$color-2: #c1bbb9; // base tan
$color-3: #ffa120; // light orange
$color-4: #e75800; // dark orange
$color-5: #f1f1f1; // light grey
$color-6: #bcb9b8; // dark grey
$color-7: #a5a4a4; // another shade of grey
$color-8: #e3ceb4; // dark tan
$color-9: #d0d0d0; // shade grey
$color-10: #fefbf7; // off white
$color-11: #e2d9cd; // off tan


// --- end variables ---------------------------------

// --- Mixins
// ---------------------------------------------------

// transitions
@mixin transition($property, $duration) {
	-webkit-transition: $property $duration ease-in-out;
	-moz-transition: $property $duration ease-in-out;
	-o-transition: $property $duration ease-in-out;
  -ms-transition: $property $duration ease-in-out;
	transition: $property $duration ease-in-out;
}

@mixin gradient($from, $to) {
  background-color: $from;
  background-image: -moz-linear-gradient($from, $to);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
  background-image: -webkit-linear-gradient($from, $to);
  background-image: -o-linear-gradient($from, $to);
}

// --- end mixins ------------------------------------

// --- Base styles
// ---------------------------------------------------

// allow padding and border to be calc with width
// and reset margin/padding
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: $color-1;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

[role="main"] {
  display: -ms-flexbox;   /* MID: IE 10 */
  display: -webkit-flex;  /* NEW, Chrome 21+ */
  display: flex;          /* NEW: Opera 12.1, Firefox 22+ */
  -webkit-justify-content: center;
	-moz-justify-content: center;
  justify-content: center;
}

// --- end base styles -------------------------------

// -// --- Checkbox styles
// ---------------------------------------------------

form {
  margin-top: 15%;
  margin: 15% 20px;
  width: 400px;
  height: 300px;
  @include gradient($color-1, $color-11);
  border-radius: 5px;
  box-shadow: 0 1px 8px rgba(0,0,0,.1);
  position: relative;
  
  label {
    color: transparent;
    display: block;
    width: 211px;
    height: 64px;
    margin-left: -108.5px;
    margin-top: -32px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 30px;
    @include gradient($color-9, $color-10);
    
    &:hover {
      cursor: pointer;
    }
    
    &:before {
      @include transition(all, .3s);
      content: '';
      position: absolute;
      border-radius: 34px;
      width: 201px;
      height: 54px;
      top: 5px;
      left: 5px;
      @include gradient($color-7, $color-8);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.0);
    }
    &:after {
      content: '';
      position: absolute;
      border-radius: 34px;
      width: 100px;
      height: 48px;
      top: 8px;
      right: 8px;
      @include gradient($color-3, $color-4);
      
      &:hover {
        cursor: pointer;
      }
    } 
    
    span {
      display: block;
      position: absolute;
      
      &:hover {
        cursor: pointer;
      }
      
      &:first-of-type {
        @include transition(all, .31s);
        z-index: 1;
        width: 123px;
        height: 70px;
        top: -3px;
        left: 4px;
        border-radius: 40px;
        @include gradient(darken($color-5, 10%), darken($color-6, 10%));
        clip: rect(11px 250px 59px 90px);
        box-shadow: 0 3px 6px rgba(0,0,0,.6);
        
        &:after {
          content: '';
          position: absolute;
          z-index: 2;
          border-radius: 30px;
          width: 195px;
          height: 48px;
          top: 11px;
          left: 4px;
          background: transparent;
          box-shadow: inset 0 3px 20px rgba(0,0,0,.8);
        } 
      }
      &:last-of-type {
        @include transition(all, .3s);
        position: absolute;
        z-index: 3;
        width: 110px;
        height: 54px;
        top: 3px;
        left: 4px;
        border-radius: 30px;
        @include gradient($color-5, $color-6);
        box-shadow: 0 7px 7px rgba(0,0,0,.5);
        border: 1px solid $color-6;
        
        &:after {
          content: '';
          position: absolute;
          z-index: 2;
          border-radius: 36px;
          width: 35px;
          height: 35px;
          top: 9px;
          right: 9px;
          @include gradient($color-6, darken($color-5, 8%));          
        }       
      }      
    }
    &.checked {
      &:before {
        box-shadow: inset 0 0 4px rgba(0,0,0,.2);
      }
    
      span {
        display: block;
        position: absolute;
      
        &:first-of-type {
          @include transition(all, .24s);
          width: 190px;
          clip: rect(11px 250px 59px 110px);
        }
        &:last-of-type {
          left: 96px;     
        }
      }
    }
  }
  input[type="checkbox"] {
    visibility: hidden;
  }
}