Switcher styles collection

index.html

<div class="row">
  <h3>Simple</h3>
  <input type="checkbox" id="simple-1">
  <label for="simple-1"></label>
  <input type="checkbox" id="simple-2">
  <label for="simple-2" class="red"></label>
  <input type="checkbox" id="simple-3">
  <label for="simple-3" class="green"></label>
</div>

<div class="row">
  <h3>Material design</h3>
  <input type="checkbox" id="md-1">
  <label for="md-1"></label>
  <input type="checkbox" id="md-2">
  <label for="md-2" class="red"></label>
  <input type="checkbox" id="md-3">
  <label for="md-3" class="green"></label>
</div>

<div class="row">
  <h3>Material design small</h3>
  <input type="checkbox" id="mds-1">
  <label for="mds-1"></label>
  <input type="checkbox" id="mds-2">
  <label for="mds-2" class="red"></label>
  <input type="checkbox" id="mds-3">
  <label for="mds-3" class="green"></label>
</div>

<div class="row">
  <h3>Border</h3>
  <input type="checkbox" id="border-1">
  <label for="border-1"></label>
  <input type="checkbox" id="border-2">
  <label for="border-2" class="red"></label>
  <input type="checkbox" id="border-3">
  <label for="border-3" class="green"></label>
</div>

<div class="row">
  <h3>Inset</h3>
  <input type="checkbox" id="inset-1">
  <label for="inset-1"></label>
  <input type="checkbox" id="inset-2">
  <label for="inset-2" class="red"></label>
  <input type="checkbox" id="inset-3">
  <label for="inset-3" class="green"></label>
</div>

<div class="row">
  <h3>Box</h3>
  <input type="checkbox" id="box-1">
  <label for="box-1"></label>
  <input type="checkbox" id="box-2">
  <label for="box-2" class="red"></label>
  <input type="checkbox" id="box-3">
  <label for="box-3" class="green"></label>
</div>

<div class="row">
  <h3>Flex</h3>
  <input type="checkbox" id="flex-1">
  <label for="flex-1"></label>
  <input type="checkbox" id="flex-2">
  <label for="flex-2" class="red"></label>
  <input type="checkbox" id="flex-3">
  <label for="flex-3" class="green"></label>
</div>

<div class="row">
  <h3>Full Flex</h3>
  <input type="checkbox" id="fullFlex-1">
  <label for="fullFlex-1"></label>
  <input type="checkbox" id="fullFlex-2">
  <label for="fullFlex-2" class="red"></label>
  <input type="checkbox" id="fullFlex-3">
  <label for="fullFlex-3" class="green"></label>
</div>

<div class="row">
  <h3>Bubble</h3>
  <input type="checkbox" id="bubble-1">
  <label for="bubble-1"></label>
  <input type="checkbox" id="bubble-2">
  <label for="bubble-2" class="red"></label>
  <input type="checkbox" id="bubble-3">
  <label for="bubble-3" class="green"></label>
</div>

<div class="row">
  <h3>Teleport</h3>
  <input type="checkbox" id="teleport-1">
  <label for="teleport-1"></label>
  <input type="checkbox" id="teleport-2">
  <label for="teleport-2" class="red"></label>
  <input type="checkbox" id="teleport-3">
  <label for="teleport-3" class="green"></label>
</div>

<div class="row">
  <h3>UnderLine</h3>
  <input type="checkbox" id="uLine-1">
  <label for="uLine-1"></label>
  <input type="checkbox" id="uLine-2">
  <label for="uLine-2" class="red"></label>
  <input type="checkbox" id="uLine-3">
  <label for="uLine-3" class="green"></label>
</div>

script.js

// Hy! You can really help me if you donate me leastways 1 dollor :)
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://codepen.io/MoorLex/pen/MmBwXe.js"></script>

style.less

input[type="checkbox"]{
  display: none;
  &+label{
    display: inline-block;
    width: 40px;
    height: 20px;
    position: relative;
    transition: 0.3s;
    margin: 0px 20px;
    box-sizing: border-box;
    &:after,&:before{
      content: '';
      display: block;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 20px;
      height: 20px;
      transition: 0.3s;
      cursor: pointer;
    }
  }
}

#simple-1,#simple-2,#simple-3{
  &:checked+label{
    &.red{background: #ECA9A7;&:after{background: #D9534F;}}
    &.green{background: #AEDCAE;&:after{background: #5CB85C;}}
    &:after{
      left: calc(~'100% - 20px');
    }
  }
  &+label{
    background: #ddd;
    border-radius: 20px;
    box-shadow: 1px 1px 3px #aaa;
    &:after{
      background: #fff;
      border-radius: 50%;
      box-shadow: 1px 1px 3px #aaa;
    }
  }
}

#md-1,#md-2,#md-3{
  &:checked+label{
    &.red{background: #ECA9A7;&:after{background: #D9534F;}}
    &.green{background: #AEDCAE;&:after{background: #5CB85C;}}
    &:after{
      left: calc(~'100% - 20px');
    }
  }
  &+label{
    background: #ddd;
    border-radius: 20px;
    height: 10px;
    &:after{
      background: #fff;
      border-radius: 50%;
      top: -5px;
      box-shadow: 0px 0px 3px #aaa;
    }
  }
}

#mds-1,#mds-2,#mds-3{
  &:checked+label{
    &.red{background: #ECA9A7;&:after{background: #D9534F;}}
    &.green{background: #AEDCAE;&:after{background: #5CB85C;}}
    &:after{
      left: calc(~'100% - 20px');
    }
  }
  &+label{
    background: #ddd;
    height: 3px;
    &:after{
      background: #fff;
      border-radius: 50%;
      top: -9px;
      box-shadow: 0px 0px 3px #aaa;
    }
  }
}

#border-1,#border-2,#border-3{
  &:checked+label{
    &.red{border-color: #ECA9A7;&:after{background: #D9534F;}}
    &.green{border-color: #AEDCAE;&:after{background: #5CB85C;}}
    &:after{
      left: calc(~'100% - 14px');
    }
  }
  &+label{
    border: 2px solid #ddd;
    border-radius: 20px;
    &:after{
      background: #ddd;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      top: 2px;
      left: 2px;
    }
  }
}

#inset-1,#inset-2,#inset-3{
  &:checked+label{
    &.red{background: #ECA9A7;&:after{background: #D9534F;}}
    &.green{background: #AEDCAE;&:after{background: #5CB85C;}}
    &:after{
      left: calc(~'100% - 18px');
    }
  }
  &+label{
    background: #ddd;
    border-radius: 20px;
    &:after{
      background: #fff;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      top: 2px;
      left: 2px;
    }
  }
}

#box-1,#box-2,#box-3{
  &:checked+label{
    &.red{background: #ECA9A7;&:after{background: #D9534F;}}
    &.green{background: #AEDCAE;&:after{background: #5CB85C;}}
    &:after{
      left: calc(~'100% - 18px');
    }
  }
  &+label{
    background: #ddd;
    &:after{
      background: #fff;
      width: 16px;
      height: 16px;
      top: 2px;
      left: 2px;
    }
  }
}

#flex-1,#flex-2,#flex-3{
  &:checked+label{
    &.red{background: #ECA9A7;&:after{background: #D9534F;}}
    &.green{background: #AEDCAE;&:after{background: #5CB85C;}}
    &:active:after{
      left: calc(~'100% - 28px');
    }
    &:after{
      left: calc(~'100% - 18px');
    }
  }
  &+label{
    background: #ddd;
    border-radius: 20px;
    &:active:after{
      width: 26px;
    }
    &:after{
      background: #fff;
      border-radius: 10px;
      width: 16px;
      height: 16px;
      top: 2px;
      left: 2px;
    }
  }
}

#fullFlex-1,#fullFlex-2,#fullFlex-3{
  &:checked+label{
    &.red{background: #D9534F;&:after{background: #ECA9A7;}}
    &.green{background: #5CB85C;&:after{background: #AEDCAE;}}
    &:after{
      width: 36px;
    }
  }
  &+label{
    background: #ddd;
    border-radius: 20px;
    &:after{
      background: #fff;
      border-radius: 10px;
      width: 16px;
      height: 16px;
      top: 2px;
      left: 2px;
    }
  }
}

#bubble-1,#bubble-2,#bubble-3{
  &:checked+label{
    &.red{background: #ECA9A7;&:after{background: #D9534F;}}
    &.green{background: #AEDCAE;&:after{background: #5CB85C;}}
    &.red{&:before{background: #D9534F;}}
    &.green{&:before{background: #5CB85C;}}
    &:active:before{
      left: calc(~'100% - 30px');
    }
    &:after,&:before{
      left: calc(~'100% - 20px');
    }
  }
  &+label{
    background: #ddd;
    border-radius: 20px;
    height: 10px;
    &:active:before{
      width: 40px;
      height: 40px;
      left: -10px;
      top: -15px;
    }
    &:after{
      background: #fff;
      border-radius: 50%;
      top: -5px;
      box-shadow: 0px 0px 3px #aaa;
    }
    &:before{
      top: -5px;
      border-radius: 50%;
      background: #ddd;
      opacity: 0.5;
      transition: width height 0.01s;
    }
  }
}

#teleport-1,#teleport-2,#teleport-3{
  &:checked+label{
    &.red{border-color: #ECA9A7;&:before{background: #D9534F;}}
    &.green{border-color: #AEDCAE;&:before{background: #5CB85C;}}
    &:after{
      left: -13px;
    }
    &:before{
      width: 12px;
      height: 12px;
      left: calc(~'100% - 15px');
    }
  }
  &+label{
    border: 2px solid #ddd;
    border-radius: 20px;
    overflow: hidden;
    &:after{
      background: #ddd;
      border-radius: 10px;
      width: 12px;
      height: 12px;
      top: 2px;
      left: 2px;
    }
    &:before{
      background: #ddd;
      border-radius: 10px;
      left: 100%;
      width: 12px;
      height: 12px;
      top: 2px;
    }
  }
}

#uLine-1,#uLine-2,#uLine-3{
  &:checked+label{
    &.red{border-color: #ECA9A7;&:after,&:before{background: #D9534F;}}
    &.green{border-color: #AEDCAE;&:after,&:before{background: #5CB85C;}}
    &:before{left: calc(~'100% + 8px');}
    &:active:before{left: calc(~'100% - 2px');}
  }
  &+label{
    background: #ddd;
    border-radius: 20px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    &:after{
      background: #ddd;
      border-radius: 10px;
      width: 16px;
      height: 16px;
      left: 26px;
    }
    &:active:before{width: 30px;}
    &:before{
      background: #ddd;
      border-radius: 10px;
      left: -2px;
      width: 20px;
      height: 2px;
      top: auto;
      bottom: -6px;
    }
  }
}
















//----------------------

h3{font-family: verdana;}
.row{
  width: 50%;
  display: block;
  line-height: 60px;
  text-align: center;
  float: left;
}

@media screen and (max-width: 600px){.row{width: 100%;float: none;}}

switcher-styles-collection.markdown

Switcher styles collection

A Pen by Alex Moore on CodePen.

License.