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