toggle button #2

by Trina Lu

HTML

<div class="switch_wrapper">
  <input type="checkbox" class="switch_input">
  <div class="switch">
    <div class="btn"></div>
  </div>
</div>

SCSS

$speed: 0.2s;
@mixin transition() {
  transition: all $speed ease;
  -webkit-transition: all $speed ease;
}

%absolue {
  position: absolute;
  width: 100%;
  height: 100%;
}

.switch_wrapper {
  position: relative;
  width: 75px;
  height: 30px;
  border-radius: 26px;
  overflow: hidden;
  font-family: sans-serif;
  /* font-family: "Courier New", Courier, monospace; */
}

.switch,
.switch_input {
  @extend %absolue;
  cursor:pointer;
}

.switch_input {
  z-index: 10;
  opacity: 0;
}

.switch {
  background: #9e9e9e;
  @include transition;
  &::before,
  &::after {
    color: #FFF;
    @extend %absolue;
    font-size: 12px;
    line-height: 30px;
  }
  &::before {
    content: 'ON';
    left: 7px;
    opacity: 0;
    @include transition;
  }
  &::after {
    content: 'OFF';
    right: 7px;
    text-align: right;
    opacity: 1;
    @include transition;
  }
  .btn {
    height: 24.5px;
    width: 24.5px;
    border-radius: 50%;
    background: #FFF;
    margin: 2.5px;
    position: absolute;
    left: 0;
    z-index: 2;
    @include transition;
  }
}

.switch_input:checked {
  & ~ .switch {
    background: #4caf50;
    &::before {
      opacity: 1;
    }
    &::after {
      opacity: 0;
    }
  }
  & ~ .switch .btn {
    left: 45px;
  }
}