<div class="center">
<input type="checkbox" id="cbx" style="display:none"/>
<label for="cbx" class="toggle">
<span>
<svg width="10px" height="10px" viewBox="0 0 10 10">
<path d="M5,1 L5,1 C2.790861,1 1,2.790861 1,5 L1,5 C1,7.209139 2.790861,9 5,9 L5,9 C7.209139,9 9,7.209139 9,5 L9,5 C9,2.790861 7.209139,1 5,1 L5,9 L5,1 Z"></path>
</svg>
</span>
</label>
</div>
html,body
height: 100%
.toggle
position: relative
display: block
width: 42px
height: 24px
cursor: pointer
-webkit-tap-highlight-color: transparent
transform: translate3d(0,0,0)
&:before
content: ""
position: relative
top: 1px
left: 1px
width: 40px
height: 22px
display: block
background: #C8CCD4
border-radius: 12px
transition: background .2s ease
span
position: absolute
top: 0
left: 0
width: 24px
height: 24px
display: block
background: white
border-radius: 50%
box-shadow: 0 2px 6px rgba(#9A9999,.75)
transition: all .2s ease
svg
margin: 7px
fill: none
path
stroke: #C8CCD4
stroke-width: 2
stroke-linecap: round
stroke-linejoin: round
stroke-dasharray: 24
stroke-dashoffset: 0
transition: all .5s linear
#cbx:checked + .toggle
&:before
background: #52D66B
span
transform: translateX(18px)
path
stroke: #52D66B
stroke-dasharray: 25
stroke-dashoffset: 25
.center
position: absolute
top: calc(50% - 12px)
left: calc(50% - 21px)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.