1.switch {
2  position: relative;
3  cursor: pointer;
4  width: 40px;
5  height: 40px;
6  background: linear-gradient(45deg,
7            rgb(183, 0, 255) 20%,
8            rgb(255, 0, 170) 100%);
9  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.363);
10  border-radius: 5px;
11}
12
13.switch input {
14  opacity: 0;
15  width: 100%;
16  height: 100%;
17  z-index: 1;
18  cursor: pointer;
19  position: absolute;
20}
21
22.switch div {
23  width: 80%;
24  height: 80%;
25  margin: 10%;
26  position: absolute;
27}
28
29.switch span {
30  background: #fff;
31  width: 100%;
32  height: 2px;
33  border-radius: 5px;
34  display: block;
35  position: absolute;
36  top: 50%;
37  left: 50%;
38  transform: translate(-50%, -50%);
39  transition: transform 0.5s, width 0.5s;
40}
41
42.switch .line-1 {
43  width: 50%;
44  transform: translate(-100%, -10px);
45  transform-origin: 0 0;
46}
47
48.switch .line-3 {
49  width: 50%;
50  left: auto;
51  right: 0;
52  transform: translate(0, 10px);
53  transform-origin: 100% 0;
54}
55
56input:checked + div span.line-1 {
57  transform: translate(0, 0) rotate(-45deg);
58}
59
60input:checked +  div span.line-3 {
61  transform: translate(-100%, 0) rotate(-45deg);
62}
63
64input:checked + div span.line-2 {
65  transform: translate(-50%, -50%) rotate(45deg);
66}