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