Pure CSS + SVG Toggle slider checkbox with tick and cross

index.pug

- var id='toggler-1', name='toggler-1', value=false

.toggler
  input(id=id, name=name, type='checkbox', checked=value, value='1')&attributes(attributes)
  label(for=id)
    svg.toggler-on(version='1.1', xmlns='http://www.w3.org/2000/svg', viewbox='0 0 130.2 130.2')
      polyline.path.check(points='100.2,40.2 51.5,88.8 29.8,67.5 ')
    svg.toggler-off(version='1.1', xmlns='http://www.w3.org/2000/svg', viewbox='0 0 130.2 130.2')
      line.path.line(x1='34.4', y1='34.4', x2='95.8', y2='95.8')
      line.path.line(x1='95.8', y1='34.4', x2='34.4', y2='95.8')

pure-css-svg-toggle-slider-with-tick-and-cross.markdown

Pure CSS + SVQ Toggle slider with tick and cross

A Pen by Ian Egner on CodePen.

License.

style.scss

$red: #d7062a;
$green: #50ac5d;
$black: #040405;
$white: #fefefe;
$border-colour: #d6d6d6;
$background-colour: #e4e8e8;

$width: 72px;
$height: $width / 2;

*, *::before, *::after {
    box-sizing: inherit;
}

.toggler {
  input {
    display: none;
  }

  label {
    display: block;
    position: relative;
    width: $width;
    height: $height;
    border: 1px solid $border-colour;
    border-radius: $height;
    background: $background-colour;
    cursor: pointer;

    &::after {
      display: block;
      border-radius: 100%;
      background-color: $red;
      content: '';
      animation-name: toggler-size;
      animation-duration: .15s;
      animation-timing-function: ease-out;
      animation-direction: forwards;
      animation-iteration-count: 1;
      animation-play-state: running;
    }

    &::after,
    .toggler-on,
    .toggler-off {
      position: absolute;
      top: 50%;
      left: 25%;
      width: $height - 10px;
      height: $height - 10px;
      transform: translateY(-50%) translateX(-50%);
      transition: left .15s ease-in-out, background-color .2s ease-out, width .15s ease-in-out, height .15s ease-in-out, opacity .15s ease-in-out;
    }
  }

  input:checked + label {
    &::after,
    .toggler-on,
    .toggler-off {
      left: 75%;
    }

    &::after {
      background-color: $green;
      animation-name: toggler-size2;
    }
  }

  .toggler-on,
  .toggler-off {
    opacity: 1;
    z-index: 2;
  }

  input:checked + label .toggler-off,
  input:not(:checked) + label .toggler-on {
    width: 0;
    height: 0;
    opacity: 0;
  }

  .path {
    fill: none;
    stroke: $white;
    stroke-width: 7px;
    stroke-linecap: round;
    stroke-miterlimit: 10;
  }
}

@keyframes toggler-size {
  0%,
  100% {
    width: $height - 10px;
    height: $height - 10px;
  }

  50% {
    width: $height - 16px;
    height: $height - 16px;
  }
}

@keyframes toggler-size2 {
  0%,
  100% {
    width: $height - 10px;
    height: $height - 10px;
  }

  50% {
    width: $height - 16px;
    height: $height - 16px;
  }
}