SASS styles for an image free rocker switch button for yes/no or similar 2 option choices. It's tricky in part because it's the `.active` state that has little styling, but the inactive state has transforms and other wonkiness. Output looks like this: http://i.imgur.com/twwQM3e.png

rockerButton.sass

// Result: http://i.imgur.com/twwQM3e.png

@import '../bower_components/bourbon/app/assets/stylesheets/_bourbon.scss'

$colorBackbground: whitesmoke
$colorForeground: #333
$colorGood: springgreen
$radiusSmall: 4px
$spaceTiny: 3px
$spaceLil: 10px


.btn-rocker2
  background: $colorBackground - 40
  padding: 1px
  border-radius: $radiusSmall
  .btn
    color: transparentize($colorForeground, .3)
    box-shadow: none
    border: none
    border-top: 1px solid white
    padding: $spaceTiny $spaceLil
  .btn.active
    color: $colorForeground
    margin: 0
    z-index: 3

  // Left Side
  .btn:first-child
    border-right: none
    @include linear-gradient( -50deg, $colorBackground - 10, $colorBackground )
    @include transform-origin(right center)
    @include transform-style(preserve-3d)
    @include transform( perspective(300px) rotateY(30deg) scaleX(.97) )
    box-shadow: inset 1px 0 0 0 white, -1px 0 0 0 $colorBackground - 30, -4px 0 0 -1px $colorBackground - 20, 0 1px 0 0 $colorBackground - 40, 0 -1px 0 0 $colorBackground - 20
    padding-left: $spaceLil + $spaceTiny
  .btn.active:first-child
    background-image: none
    background: $colorBackground
    @include transform(none)
    border-left: 1px solid white
    box-shadow: none
    box-shadow: inset -5px 0 1px 8px $colorBackground, inset 5px 0 1px $colorGood


  // Right Side
  .btn:last-child
    border-left: none
    @include linear-gradient( 50deg, $colorBackground - 10, $colorBackground )
    @include transform-origin(left center)
    @include transform-style(preserve-3d)
    @include transform( perspective(300px) rotateY(-30deg) scaleX(.97) )
    box-shadow: inset -1px 0 0 0 white, 1px 0 0 0 $colorBackground - 30, 4px 0 0 -1px $colorBackground - 20, 0 1px 0 0 $colorBackground - 40, 0 -1px 0 0 $colorBackground - 20
    padding-right: $spaceLil + $spaceTiny
  .btn.active:last-child
    background-image: none
    background: $colorBackground
    @include transform(none)
    border-right: 1px solid white
    box-shadow: none
    box-shadow: inset 5px 0 1px 8px $colorBackground, inset -5px 0 1px $colorGood
  .btn:last-child:hover
    border-left: none