CSS On/Off Power Toggle button

Power On/Off Toggle button using html, SVG and css only with beautiful animation. Demo and Download options available.

HTML Snippet

<label class="power">
    <input type="checkbox">
    <div>
        <svg viewBox="0 0 44 44">
            <path d="M22,6 C31,6 38,13 38,22 C38,31 31,38 22,38 C13,38 6,31 6,22 C6,13 13,6 22,6 L22,28" id="path"></path>
        </svg>
    </div>
</label>

CSS Code

.power {
  display: table;
  cursor: pointer;
}
.power input {
  display: none;
}
.power input + div {
  position: relative;
  overflow: hidden;
  background: #EB2C59;
  border-radius: 50%;
  padding: 18px;
  transition: -webkit-transform .4s ease;
  transition: transform .4s ease;
  transition: transform .4s ease, -webkit-transform .4s ease;
  -webkit-filter: drop-shadow(0 4px 6px rgba(235, 44, 89, 0.3));
          filter: drop-shadow(0 4px 6px rgba(235, 44, 89, 0.3));
}
.power input + div:before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  left: 50%;
  z-index: 2;
  margin: 0 0 0 -2px;
  top: 18px;
  opacity: 1;
  -webkit-transform: scaleY(1) translate(0, 2px);
          transform: scaleY(1) translate(0, 2px);
  transition: opacity .4s ease .1s, -webkit-transform .9s ease .4s;
  transition: opacity .4s ease .1s, transform .9s ease .4s;
  transition: opacity .4s ease .1s, transform .9s ease .4s, -webkit-transform .9s ease .4s;
}
.power input + div:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #21E76E;
  -webkit-transform: translate(100%, 100%);
          transform: translate(100%, 100%);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  transition: -webkit-transform .8s ease;
  transition: transform .8s ease;
  transition: transform .8s ease, -webkit-transform .8s ease;
}
.power input + div svg {
  width: 36px;
  height: 36px;
  fill: none;
  display: block;
  stroke: #fff;
  position: relative;
  z-index: 2;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 84;
  stroke-dashoffset: 160;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: stroke-dasharray .6s ease 0s, stroke-dashoffset .7s ease .0s;
}
.power input + div:active {
  -webkit-transform: scale(0.96);
          transform: scale(0.96);
}
.power input:checked + div {
  -webkit-filter: drop-shadow(0 4px 6px rgba(33, 231, 110, 0.3));
          filter: drop-shadow(0 4px 6px rgba(33, 231, 110, 0.3));
}
.power input:checked + div svg {
  stroke-dasharray: 120;
  stroke-dashoffset: 133;
  transition: stroke-dasharray 0.6s ease 0.45s, stroke-dashoffset 0.7s cubic-bezier(0.94, -0.1, 0.1, 1.2) 0.2s;
}
.power input:checked + div:before {
  -webkit-transform: scaleY(0) translate(0, 7px);
          transform: scaleY(0) translate(0, 7px);
  transition: opacity .4s ease .0s, -webkit-transform .6s ease .3s;
  transition: opacity .4s ease .0s, transform .6s ease .3s;
  transition: opacity .4s ease .0s, transform .6s ease .3s, -webkit-transform .6s ease .3s;
}
.power input:checked + div:after {
  -webkit-transform: translate(40%, 40%);
          transform: translate(40%, 40%);
}

body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  color: #ADAFB6;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
  opacity: .5;
  transition: all .4s ease;
}
body .dribbble:hover {
  opacity: 1;
}
body .dribbble img {
  display: block;
  height: 36px;
}

Preview