Button by Navarog21

1button {
2  position: relative;
3  width: 11em;
4  height: 4em;
5  outline: none;
6  transition: 0.1s;
7  background-color: transparent;
8  border: none;
9  font-size: 13px;
10  font-weight: bold;
11  color: #ddebf0;
12}
13
14#clip {
15  --color: #2761c3;
16  position: absolute;
17  top: 0;
18  overflow: hidden;
19  width: 100%;
20  height: 100%;
21  border: 5px double var(--color);
22  box-shadow: inset 0px 0px 15px #195480;
23  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
24}
25
26.arrow {
27  position: absolute;
28  transition: 0.2s;
29  background-color: #2761c3;
30  top: 35%;
31  width: 11%;
32  height: 30%;
33}
34
35#leftArrow {
36  left: -13.5%;
37  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
38}
39
40#rightArrow {
41  -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
42  left: 102%;
43}
44
45button:hover #rightArrow {
46  background-color: #27c39f;
47  left: -15%;
48  animation: 0.6s ease-in-out both infinite alternate rightArrow8;
49}
50
51button:hover #leftArrow {
52  background-color: #27c39f;
53  left: 103%;
54  animation: 0.6s ease-in-out both infinite alternate leftArrow8;
55}
56
57.corner {
58  position: absolute;
59  width: 4em;
60  height: 4em;
61  background-color: #2761c3;
62  box-shadow: inset 1px 1px 8px #2781c3;
63  transform: scale(1) rotate(45deg);
64  transition: 0.2s;
65}
66
67#rightTop {
68  top: -1.98em;
69  left: 91%;
70}
71
72#leftTop {
73  top: -1.96em;
74  left: -3.0em;
75}
76
77#leftBottom {
78  top: 2.10em;
79  left: -2.15em;
80}
81
82#rightBottom {
83  top: 45%;
84  left: 88%;
85}
86
87button:hover #leftTop {
88  animation: 0.1s ease-in-out 0.05s both changeColor8,
89  0.2s linear 0.4s both lightEffect8;
90}
91
92button:hover #rightTop {
93  animation: 0.1s ease-in-out 0.15s both changeColor8,
94  0.2s linear 0.4s both lightEffect8;
95}
96
97button:hover #rightBottom {
98  animation: 0.1s ease-in-out 0.25s both changeColor8,
99  0.2s linear 0.4s both lightEffect8;
100}
101
102button:hover #leftBottom {
103  animation: 0.1s ease-in-out 0.35s both changeColor8,
104  0.2s linear 0.4s both lightEffect8;
105}
106
107button:hover .corner {
108  transform: scale(1.25) rotate(45deg);
109}
110
111button:hover #clip {
112  animation: 0.2s ease-in-out 0.55s both greenLight8;
113  --color: #27c39f;
114}
115
116@keyframes changeColor8 {
117  from {
118    background-color: #2781c3;
119  }
120
121  to {
122    background-color: #27c39f;
123  }
124}
125
126@keyframes lightEffect8 {
127  from {
128    box-shadow: 1px 1px 5px #27c39f;
129  }
130
131  to {
132    box-shadow: 0 0 2px #27c39f;
133  }
134}
135
136@keyframes greenLight8 {
137  from {
138  }
139
140  to {
141    box-shadow: inset 0px 0px 32px #27c39f;
142  }
143}
144
145@keyframes leftArrow8 {
146  from {
147    transform: translate(0px);
148  }
149
150  to {
151    transform: translateX(10px);
152  }
153}
154
155@keyframes rightArrow8 {
156  from {
157    transform: translate(0px);
158  }
159
160  to {
161    transform: translateX(-10px);
162  }
163}
164
165
166