1button {
2  display: -webkit-box;
3  display: -ms-flexbox;
4  display: flex;
5  -webkit-box-pack: center;
6  -ms-flex-pack: center;
7  justify-content: center;
8  -webkit-box-align: center;
9  -ms-flex-align: center;
10  align-items: center;
11  background: rgba(255, 255, 255, 0.2);
12  border: 2px solid #26c4c3;
13  border-right-color: transparent;
14  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 1), 0 0 10px rgb(194,255,255);
15  box-shadow: 0 4px 20px rgba(0, 0, 0, 1), 0 0 10px rgb(194,255,255);
16  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 20%, 100% 20%, 85% 100%, 80% 100%, 95% 20%, 50% 20%, 30% 0);
17  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 20%, 100% 20%, 85% 100%, 80% 100%, 95% 20%, 50% 20%, 30% 0);
18  backdrop-filter: blur(2px);
19  -webkit-backdrop-filter: blur(2px);
20  width: 150px;
21  height: 55px;
22  font-size: 1.5rem;
23  color: white;
24  text-shadow: 0 1px 1px black;
25  position: relative;
26  -webkit-transition: all .5s ease-in-out;
27  transition: all .5s ease-in-out;
28}
29
30button:hover {
31  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 20%, 100% 20%, 100% 100%, 100% 100%, 100% 20%, 50% 20%, 30% 0);
32  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 20%, 100% 20%, 100% 100%, 100% 100%, 100% 20%, 50% 20%, 30% 0);
33  backdrop-filter: blur(5px);
34  -webkit-backdrop-filter: blur(5px);
35}
36
37button::after {
38  content: '';
39  position: absolute;
40  display: block;
41  top: 0;
42  left: 0;
43  width: 50%;
44  height: 5px;
45  background-color: rgb(194,255,255);
46  -webkit-box-shadow: 0 0 5px rgb(194,255,255);
47  box-shadow: 0 0 5px rgb(194,255,255);
48  -webkit-transform: translateY(-50%);
49  -ms-transform: translateY(-50%);
50  transform: translateY(-50%);
51  z-index: 2;
52  -webkit-animation: btn 1s infinite ease-in-out;
53  animation: btn 1s infinite ease-in-out;
54}
55
56button::before {
57  content: '';
58  position: absolute;
59  display: block;
60  bottom: 0;
61  right: 0;
62  width: 100%;
63  height: 5px;
64  background-color: rgb(194,255,255);
65  -webkit-box-shadow: 0 0 5px rgb(194,255,255);
66  box-shadow: 0 0 5px rgb(194,255,255);
67  -webkit-transform: translateY(50%);
68  -ms-transform: translateY(50%);
69  transform: translateY(50%);
70  z-index: 3;
71  animation: btn_51 1s infinite ease-in-out reverse;
72}
73
74@keyframes btn_51 {
75  0%,100% {
76    width: 100%;
77  }
78
79  25%,75% {
80    width: 0;
81  }
82
83  50% {
84    width: 50%;
85  }
86}