#e8e8e8
1.toggler { 2 width: 72px; 3 margin: 40px auto; 4} 5 6.toggler input { 7 display: none; 8} 9 10.toggler label { 11 display: block; 12 position: relative; 13 width: 72px; 14 height: 36px; 15 border: 1px solid #d6d6d6; 16 border-radius: 36px; 17 background: #e4e8e8; 18 cursor: pointer; 19} 20 21.toggler label::after { 22 display: block; 23 border-radius: 100%; 24 background-color: #d7062a; 25 content: ''; 26 animation-name: toggler-size; 27 animation-duration: 0.15s; 28 animation-timing-function: ease-out; 29 animation-direction: forwards; 30 animation-iteration-count: 1; 31 animation-play-state: running; 32} 33 34.toggler label::after, .toggler label .toggler-on, .toggler label .toggler-off { 35 position: absolute; 36 top: 50%; 37 left: 25%; 38 width: 26px; 39 height: 26px; 40 transform: translateY(-50%) translateX(-50%); 41 transition: left 0.15s ease-in-out, background-color 0.2s ease-out, width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s ease-in-out; 42} 43 44.toggler input:checked + label::after, .toggler input:checked + label .toggler-on, .toggler input:checked + label .toggler-off { 45 left: 75%; 46} 47 48.toggler input:checked + label::after { 49 background-color: #50ac5d; 50 animation-name: toggler-size2; 51} 52 53.toggler .toggler-on, .toggler .toggler-off { 54 opacity: 1; 55 z-index: 2; 56} 57 58.toggler input:checked + label .toggler-off, .toggler input:not(:checked) + label .toggler-on { 59 width: 0; 60 height: 0; 61 opacity: 0; 62} 63 64.toggler .path { 65 fill: none; 66 stroke: #fefefe; 67 stroke-width: 7px; 68 stroke-linecap: round; 69 stroke-miterlimit: 10; 70} 71 72@keyframes toggler-size { 73 0%, 100% { 74 width: 26px; 75 height: 26px; 76 } 77 78 50% { 79 width: 20px; 80 height: 20px; 81 } 82} 83 84@keyframes toggler-size2 { 85 0%, 100% { 86 width: 26px; 87 height: 26px; 88 } 89 90 50% { 91 width: 20px; 92 height: 20px; 93 } 94} 95
Comments
MIT License