Cacher is the code snippet organizer for pro developers

@import "compass/css3";

// *********************************** //
// AngularJS + CSS3 Radio Buttons v.01
// Author: iamtyce.com
// Inspiration: http://bit.ly/Nh4U6g
// *********************************** //

// Establish overall variables

$toggleheight: 2em;
$togglewidth: 3.2em;
$togglebg: rgb(255,255,255);
$togglebordersize: .12em;
$togglebordercolor: rgb(230,230,230);
$toggleinputwidth: $togglewidth * 1.5;

$switchbg: rgb(255,255,255);
$switchsize: $toggleheight * .95;
$switchbordersize: .1em;
$switchbordercolor: darken($switchbg, 15%);

$activecolor: rgb(0,220,97);
$activebordercolor: darken($activecolor, 5%);

$labeloffset: $toggleheight / 3.63636364;
$borderradius: 2em;

// Body Styles

body {
  background: white;
  padding: 2em;
  font: 16px / 20px "Helvetica Neue", Helvetica;
}

p {
  padding: 1em 0 0;
  clear: both;
  text-transform: capitalize;
  font-weight: 200;
  color: #999;
}

// Switch Styles

.toggle-bg {
  background: $togglebg;
  border-radius: $borderradius;
  border: $togglebordersize solid $togglebordercolor;    
  display: block; /* ...So that we can set a height and width */
  float: left; /* ...So that it doesn't take up the full width of the page */
  height: $toggleheight; /* You can change this later if you want */
  position: relative; /* Required to allow the switch to move around */
  width: $togglewidth; /* This can be changed later as well */
  @include transition-duration(.2s);
  position: relative;
  
  &:hover {
    border-color: darken($togglebordercolor,5%);
  }
    
  &.on {
    background: $activecolor;
    border-color: $activebordercolor;
  }
  
  input {
    margin: 0;
    padding: 0;
    width: $toggleinputwidth;
    height: 100%;
    @include opacity(0);
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index: 2; /* We want the input to be over the span.switch, which we'll give a z-index of 1 */
    /*IE*/
    zoom: 1;
    filter: alpha(opacity=0);
    
    /* initial toggle position */
    &:checked~.switch{
      left: 0;
    }
    
    /* final relative toggle position */
    &~:checked~.switch{
      left: ($togglewidth - $switchsize - $togglebordersize);
    }
    
    &:checked{
      z-index: 0;
    }
    
  }
  
}

// Main circular switch

.switch {
  background: $switchbg;
  border-radius: $borderradius;  
  border: $switchbordersize solid $switchbordercolor;      
  display: block;
  float: left;
  height: $switchsize;
  width: $switchsize;
  left: -.1em;
  position: relative;
  @include transition-duration(.2s);
  z-index: 1; /* Remember, it must be below the invisible inputs */
  
  &.on {
    box-shadow: 
      -.2em .2em .5em rgba(0,0,0,.06), 
      .4em .4em 1.5em rgba(0,0,0,.08);
  }
  
  &.off {
    box-shadow:
      .2em .2em .5em rgba(0,0,0,.06),
      -.4em .4em 1.5em rgba(0,0,0,.08);
  }
  
}

// Alternate

.toggle-alternate {
  clear: both;
  margin: 1em 0 0;
  width: $togglewidth * 1.4;
  
  input {
    width: $toggleinputwidth * 1.3;
    
    &~:checked~.switch{
      left: ($togglewidth * 1.4 - $switchsize - $togglebordersize);
    }
  
  }
}

.toggle-alternate label {
  font-weight: 300; 
  font-size: .9em;
  text-transform: uppercase;
  position: absolute;
  top: $labeloffset;
  // transition: .05s all;
}

.toggle-bg label.on {
  left: .75em;
  color: white;
  text-shadow: 0 .1em 0 $activecolor;
}

.toggle-bg label.off {
  right: .55em;
  color: #aaa;
}

function standardSwitch($scope) {
  $scope.switch = 'off';
}

function alternateSwitch($scope) {
  $scope.switchAlternate = 'off';
}

<!-- AngularJS 1.0.6 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

<div ng-app="">
    
  <!-- Standard Switch -->
  
  <form ng-controller="standardSwitch">
    
    <div class="toggle-bg {{switch}}" ng-init="switch : 'off'">
      
      <input type="radio" name="toggle" value="off" ng-model="switch">
      <input type="radio" name="toggle" value="on" ng-model="switch">
      <span class="switch {{switch}}"></span>
    </div>
        
    <p><strong>State</strong>: {{switch}}</p>

  </form>
      
  <!-- Alternative Switch -->
      
  <form ng-controller="alternateSwitch">
          
    <div class="toggle-bg toggle-alternate {{switchAlternate}}">

      <label class="{{switchAlternate}}">{{switchAlternate}}</label>
      <input type="radio" name="toggle" value="off" ng-model="switchAlternate">
      <input type="radio" name="toggle" value="on" ng-model="switchAlternate">
      <span class="switch {{switchAlternate}}"></span>

    </div>
        
    <p><strong>State</strong>: {{switchAlternate}}</p>
          
  </form>
        
</div> <!-- end ng-app -->