<div id="app-cover">
  <input type="checkbox" id="checkbox">
  <div id="path"></div>
  <div id="knob">
    <div id="bow"><i class="icon ion-md-bowtie"></i></div>
  </div>
  <div id="gender">
    <div id="fe">FE</div>
    <div id="male"><span>MALE</span></div>
  </div>
</div>
* {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  background-color: #7aa0ff;
}

#app-cover {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 283px;
  height: 130px;
  margin: -65px auto 0 auto;
}

#checkbox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 20px;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

#path {
  width: 243px;
  height: 90px;
  padding: 20px;
  background-color: #f1f3f8;
  border-radius: 100px;
  box-shadow: 0 40px 80px #6381cd;
}

#knob {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 90px;
  height: 90px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #dae4ff;
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
  z-index: 1;
}

#bow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -17px;
  width: 30px;
  margin: 0 auto;
  transition: 0.2s ease color;
}

#bow i {
  display: block;
  font-size: 34px;
  line-height: 1;
}

#gender {
  position: absolute;
  top: 50%;
  right: 40px;
  width: 80px;
  font-size: 30px;
  font-family: Roboto, Helvetica;
  text-align: right;
  line-height: 1;
  margin-top: -15px;
}

#fe {
  position: absolute;
  left: -115px;
  color: #e91e63;
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
}

#male {
  left: 0;
}

#male,
#male span {
  position: relative;
}

#bow,
#male span {
  color: #7aa0ff;
}

#male span {
  z-index: 1;
}

#male:before {
  content: "MALE";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  color: #e91e63;
  white-space: pre;
  overflow: hidden;
  transition: 0.2s cubic-bezier(0.4, 0, 1, 1) all;
  z-index: 2;
}

#path.fe {
  background-color: #f8f1f7;
}

#checkbox:checked ~ #knob {
  transform: rotateZ(-135deg);
  box-shadow: 0 0 6px #ffe2fe;
}

#knob #bow.fe {
  color: #e91e63;
}

#checkbox:checked ~ #gender #fe {
  left: -34px;
}

#male.fe:before {
  width: 100%;
}

#checkbox:checked ~ #gender #male {
  animation: move 0.2s ease 0.4s;
}

#male.ma {
  animation: move_l 0.2s ease 0.1s;
}

@keyframes move {
  0% {
    left: 0;
  }
  50% {
    left: 5px;
  }
  100% {
    left: 0;
  }
}

@keyframes move_l {
  0% {
    left: 0;
  }
  50% {
    left: 5px;
  }
  100% {
    left: 0;
  }
}
$(function () {
  var checkbox = $("#checkbox"),
    path = $("#path"),
    bow = $("#bow"),
    male = $("#male");

  checkbox.on("change", function () {
    if ($(this).is(":checked")) {
      male.removeClass("ma");
      setTimeout(function () {
        path.addClass("fe");
        male.addClass("fe");
        bow.addClass("fe");
      }, 390);
    } else {
      male.addClass("ma");
      setTimeout(function () {
        path.removeClass("fe");
        male.removeClass("fe");
        bow.removeClass("fe");
      }, 390);
    }
  });
});
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:900
  2. https://unpkg.com/ionicons@4.4.2/dist/css/ionicons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js