Checkbox Switch

Checkbox-Switch.markdown

Checkbox Switch

A simple, gummy little switch thingy. Now accelerated for touch devices! All JS can be removed though and it will still work.

A Pen by Christian Naths on CodePen.

License.

index.haml

%form{ action: "#"}

  .field.position
    %input(type="checkbox" id="checkme")
    %label Animated using position
    
  %hr
    
  .field.transform
    %input(type="checkbox" id="checkme")
    %label Animated using transform

#output

script.coffee

if (Modernizr.touch)
  $("#output").text("Touch device")
	
  $switch = $("input[type='checkbox']")

  $switch.on "click", (event) ->
    event.preventDefault()
    event.stopPropagation()

  $switch.on "touchend", (event) ->
    event.preventDefault()
    event.stopPropagation()

    $this = $(this)

    if $this.is(":checked")
      $this.prop("checked", false) 
    else
      $this.prop("checked", true)

style.sass

@keyframes switch-on-position
  0%
    left: 0
    right: 50%
  
  25%
    left: 0
    right: 37.5%
  
  100%
    left: 50%
    right: 0
  
@keyframes switch-off-position
  0%
    left: 50%
    right: 0
  
  25%
    left: 37.5%
    right: 0
  
  100%
    left: 0%
    right: 50%
  
@keyframes switch-on-transform
  0%
    transform: translate(0) scaleX(1)
  
  25%
    transform: translate(0) scaleX(1.33)
  
  100%
    transform: translate(100%) scaleX(1)
  
@keyframes switch-off-transform
  0%
    transform: translate(100%) scaleX(1)
  
  25%
    transform: translate(100%) scaleX(1.33)
  
  100%
    transform: translate(0) scaleX(1)
  


body
  max-width: 30em
  margin: 0 auto
  text-align: center
  padding: 1.5em 2em

input[type="checkbox"]
  position: relative
  display: inline-block
  -webkit-appearance: none
  -webkit-tap-highlight-color: transparent
  height: 2em
  width: 4em
  font-size: 2em
  border-radius: 1.5em
  background-color: $neutral-medium
  border-color: transparent
  background-clip: padding-box
  color: $neutral-light
  vertical-align: middle
  transition: all 0.25s linear 0.25s

  &::before
    content: ""
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 50%
    background-color: white
    border-radius: 100%
    border: 0.125em solid transparent
    background-clip: padding-box
    z-index: 2
    transform-origin: right center
 

  &::after
    position: absolute
    left: 0.675em
    top: 0
    line-height: 2
    font-family: "Ionicons"
    content: "\f121 \f129"
    letter-spacing: 1em
    z-index: 1

  &:focus
    color: white
    border-color: transparent
    background-color: $neutral-medium
    outline: none


input[type="checkbox"]:checked
  color: white
  background-color: $green
  border-color: transparent

  &::before
    transform-origin: left center
  
.field
  display: inline-block
  margin: 1.5em 0
  
hr
  border: none
  border-bottom: 1px solid $neutral-light
  
label
  display: block
  color: $neutral-medium
  

.field.position input[type="checkbox"]::before
  animation: switch-off-position 0.25s ease-out forwards
  
.field.position input[type="checkbox"]:checked::before
  animation: switch-on-position 0.25s ease-out forwards  
  
.field.transform input[type="checkbox"]::before
  animation: switch-off-transform 0.25s ease-out forwards
  
.field.transform input[type="checkbox"]:checked::before
  animation: switch-on-transform 0.25s ease-out forwards