CodePen

HTML

            
              !!!
%html
  %head
    %meta{ :charset => "utf-8" }
    %title "iOS7 Toggle"
    %script{ :src => "//code.jquery.com/jquery-latest.min.js" }
  %body
    .toggle-wrap
      .toggle
        .toggle-color
        .toggle-dot

    .copyright
      Created by
      %a{ :href => "http://twitter.com/iDuuck" } Dominik Schmidt
      ·
      Inspired by
      %a{ :href => "http://twitter.com/iDuuck" } Daniel Eden
            
          
!

CSS

            
              *
  box-sizing: border-box
  font: 13px/24px "Helvetica Neue", sans-serif

.toggle-wrap
  position: absolute
  top: 50%
  left: 50%
  margin-top: -16px
  margin-left: -35px

  .toggle
    position: relative
    background: #e1e1e1
    padding: 2px
    width: 70px
    box-shadow: inset 0px 0px 0px 2px darken(#e1e1e1, 2)
    height: 32px
    border-radius: 16px

    transition: all .4s ease-in-out

    &.active
      box-shadow: inset 0px 0px 0px 30px #57de72

      &:active
        .toggle-dot
          margin-left: 30px

      .toggle-dot
        margin-left: 38px


    &:active
      // box-shadow: inset 0px 0px 0px 30px #57de72

      .toggle-dot
        width: 36px

    .toggle-dot
      position: relative
      z-index: 3
      background: white
      height: 28px
      width: 28px
      border-radius: 14px
      transition: all .2s ease-in-out

.copyright
  position: absolute
  left: 10%
  right: 10%
  text-align: center
  color: #999
  bottom: 15px
  font-size: 13px

  a
    color: inherit
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $ ->
  $('.toggle').mouseup ->
    $(@).toggleClass 'active'
    return
  return
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................