Power On/Off Toggle button using html, SVG and css only with beautiful animation. Demo and Download options available.
Author Aaron Iker
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
