Switch by elijahgummer

1.square {
2  border: 1px solid #5e42a6;
3  height: 26px;
4  width: 26px;
5  display: block;
6  margin: 40px auto;
7  transform: rotate(45deg);
8  overflow: hidden;
9  cursor: pointer;
10  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
11  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
12  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
13  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
14  /* custom */
15}
16
17.square .burgerwrap {
18  height: 18px;
19  width: 21px;
20  transform: rotate(-45deg);
21  padding-left: 2px;
22  padding-top: 8px;
23  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
24  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
25  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
26  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
27  /* custom */
28}
29
30.square:hover {
31  transform: rotate(135deg);
32  border: 1px solid #fff;
33  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 5px rgba(255, 255, 255, 0.5),
34    0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5),
35    0 0 40px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.5),
36    0 0 60px rgba(255, 255, 255, 0.5);
37}
38
39.square:hover .burgerwrap {
40  transform: rotate(-135deg);
41}
42
43.square span {
44  height: 2px;
45  width: 14px;
46  background: linear-gradient(145deg, #5e42a6, #b46be4);
47  display: block;
48  margin-bottom: 2px;
49  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
50  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
51  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
52  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
53  /* custom */
54}
55
56.square span:after {
57  content: "";
58  height: 2px;
59  width: 14px;
60  position: absolute;
61  background: #fff;
62  left: -22px;
63  margin-top: -4px;
64  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
65  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
66  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
67  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
68  /* custom */
69}
70
71.square:hover span {
72  margin-left: 26px;
73}
74
75.square:hover span:after {
76  left: 0.2px;
77}
78
79.square span:nth-of-type(1),
80.square span:nth-of-type(1):after {
81  transition-delay: 0.1s;
82}
83
84.square span:nth-of-type(2),
85.square span:nth-of-type(2):after {
86  transition-delay: 0.2s;
87}
88
89.square span:nth-of-type(3),
90.square span:nth-of-type(3):after {
91  transition-delay: 0.3s;
92}
93