Home / Frontend Codes and Demos / CSS Code Demos / CSS On/Off Power Toggle button
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.

CSS On/Off Power Toggle button

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.

Demo Download

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

On/Off Power Toggle button preview

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …