Colorful Switch (CSS Only)

Colorful Switch (CSS Only).markdown

Colorful Switch (CSS Only)

Based on this dribbble shot by Nick Buturishvili - https://dribbble.com/shots/2272690-Switch

Tested in Chrome/FF/IE11.

A Pen by Nikolay Talanov on CodePen.

License.

index.html

<div class="switch">
  <input type="checkbox" class="switch__checkbox" id="switch-cb" />
  <label class="switch__label" for="switch-cb">
    <span class="switch__bg"></span>
    <span class="switch__dot"></span>
    <span class="switch__on">
      <span class="switch__on__inner"></span>
    </span>
    <span class="switch__off"></span>
  </label>
</div>

style.css

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #24282C;
}

$w: 280px;
$h: 120px;
$br: 50px;
$outerOffset: 5px;
$animTime: 0.5s;
$dotS: 8px;
$dotLeft: 204px;
$dotLeftOffset: -125px;
$offS: 64px;
$cubIn: cubic-bezier(.52,-0.96,.51,1.28);
$cubOut: cubic-bezier(.67,-0.16,.47,1.61);

@mixin switchOn() {
  .switch__checkbox:checked ~ .switch__label & {
    @content;
  }
}

.switch {
  position: absolute;
  left: 50%;
  top: 50%;
  width: $w;
  height: $h;
  margin-left: $w/-2;
  margin-top: $h/-2;
  border-radius: $br;
  background: #cfcfcf;

  &:before {
    content: "";
    z-index: -1;
    position: absolute;
    left: -$outerOffset;
    top: -$outerOffset;
    width: $w + $outerOffset*2;
    height: $h + $outerOffset*2;
    border-radius: $br + $outerOffset;
    background: #314239;
    transition: background-color 0.3s;
  }

  &:hover:before {
    background: #4C735F;
  }

  &__checkbox {
    z-index: -10;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }

  &__label {
    z-index: 1;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: $br;
    cursor: pointer;
  }

  &__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: $w * 3;
    height: 100%;
    background: linear-gradient(90deg, #14DCD6 0, #10E7BD $w, #EF9C29 $w*2, #E76339 100%);
    transition: transform $animTime;
    transform: translate3d($w*-2,0,0);

    @include switchOn {
      transform: translate3d(0,0,0);
    }
  }

  &__dot {
    position: absolute;
    left: $dotLeft;
    top: 50%;
    width: $dotS;
    height: $dotS;
    margin-left: $dotS/-2;
    margin-top: $dotS/-2;
    border-radius: 50%;
    background: #fff;
    transition: transform $animTime;
    transform: translate3d(0,0,0);

    @include switchOn {
      transform: translate3d($dotLeftOffset,0,0);
    }
  }

  &__on {
    position: absolute;
    left: 177px;
    top: 35px;
    width: 30px;
    height: 56px;
    transition: transform $animTime;
    transform: translate3d(0,0,0);

    @include switchOn {
      transform: translate3d($dotLeftOffset,0,0);
    }

    &__inner {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: transform $animTime/2 0s $cubIn;
      transform-origin: 100% 50%;
      transform: rotate(45deg) scale(0) translateZ(0);

      @include switchOn {
        transition: transform $animTime/2 $animTime/2 $cubOut;
        transform: rotate(45deg) scale(1) translateZ(0);
      }

      &:before,
      &:after {
        content: "";
        position: absolute;
        border-radius: $dotS/2;
        background: #fff;
      }
      &:before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: $dotS+1px;
      }
      &:after {
        right: 0;
        top: 0;
        width: $dotS+1px;
        height: 100%;
      }
    }
  }

  &__off {
    position: absolute;
    left: $dotLeft;
    top: 50%;
    width: $offS;
    height: $offS;
    margin-left: $offS/-2;
    margin-top: $offS/-2;
    transition: transform $animTime;
    transform: translate3d(0,0,0);

    @include switchOn {
      transform: translate3d($dotLeftOffset,0,0);
    }

    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: $dotS;
      margin-top: $dotS/-2;
      border-radius: $dotS/2;
      background: #fff;
      transition: transform $animTime/2 $animTime/2;

      @include switchOn {
        transition-delay: 0s;
      }
    }
    &:before {
      transform: rotate(45deg) scaleX(1) translateZ(0);

      @include switchOn {
        transform: rotate(45deg) scaleX(0) translateZ(0);
      }
    }
    &:after {
      transition-timing-function: $cubOut;
      transform: rotate(-45deg) scaleX(1) translateZ(0);

      @include switchOn {
        transition-timing-function: ease;
        transform: rotate(-45deg) scaleX(0) translateZ(0);
      }
    }
  }
}