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.

Author	Aaron Iker
Hits
Created	SEPTEMBER 14, 2018
License	Open
Compatible browsers	Chrome, Firefox, Opera, Safari

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