Css switch (from a checkbox)

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by A Non Ymous on CodePen.

License.

index.html

<input type="checkbox" checked="checked" class="switch" />

script.js

////////////////////////////////////////
// Code By Jordan Robert Dobson
//
// JordanDobson.com
// @jordandobson
// [email protected]
////////////////////////////////////////

// NO JAVASCRIPT NEEDED!

style.scss

@import "compass";
$base-font-size: 10px;

$switch-width: 9em;
$switch-size: 4.6em;
$switch-space: .2em;

$switch-off-padding: 0em;
$switch-on-padding:  $switch-size - $switch-space;
$switch-button-size: $switch-size - ($switch-space*2);

$switch-off-border: #eee;
$switch-on-color: #00c169;
$switch-toggle-color: #fff;

$switch-animation-distance-extend: .3em;

body{ padding: 5em; }

input.switch {
  font-size: $base-font-size;
  position: relative;
  display: block;
  appearance: none;
  width:         $switch-width;
  height:        $switch-size;
  line-height:   $switch-size;
  border-radius: $switch-size/2;
  margin:  0;
  padding: 0;
  box-shadow: inset 0 0 0 $switch-space $switch-off-border;
  outline: 1px solid transparent !important;
  cursor: pointer;
  transition: box-shadow .2s ease-in-out, padding .25s ease-in-out;
  transition-delay: .1s, 0s;
  
  animation: slide-off .35s ease both; /* Lets animate if supported */

  &:checked {
    transition-delay: 0s, 0s;
    box-shadow: inset 0 0 0 $switch-size/1.75 $switch-on-color !important;
    padding-left: $switch-on-padding;
    animation: slide-on .35s ease both .05s;
  }

  &::before {
    content: "";
    display: inline-block;
    height: $switch-button-size;
    width:  $switch-button-size;
    margin: $switch-space 0 0 $switch-space;
    background-color: $switch-toggle-color;
    border-radius: $switch-button-size/2;
    box-shadow: 0 .2em .4em 0 rgba(0,0,0,.20), 0 0 .1em .1em rgba(0,0,0,.10);
  }
  &:hover:checked::before { 
    background-color: lighten($switch-toggle-color, 95%);
  }
}

@keyframes slide-on{
    0% { padding-left: $switch-off-padding; }
   60% { padding-left: $switch-on-padding + $switch-animation-distance-extend; }
  100% { padding-left: $switch-on-padding; }
}
@keyframes slide-off{
    0% { padding-left: $switch-on-padding;  text-indent: 0; }
   60% { padding-left: $switch-off-padding; text-indent: -$switch-animation-distance-extend; }
  100% { padding-left: $switch-off-padding; text-indent: 0; }
}