Button by satyamchaudharydev

1button {
2  border: none;
3  width: 140px;
4  height: 50px;
5  color: #fff;
6  z-index: 1;
7  display: flex;
8  background: #000;
9  position: relative;
10  cursor: pointer;
11}
12
13button p {
14  margin: 0 auto;
15  align-self: center;
16  font-size: 17px;
17  font-weight: bold;
18  text-align: center;
19}
20
21button::after {
22  position: absolute;
23  content: "";
24  width: 100%;
25  z-index: -1;
26  height: 10%;
27  bottom: 0;
28  clip-path: polygon(
29    0% 74%,
30    4% 75%,
31    8% 76%,
32    11% 77%,
33    15% 78%,
34    20% 78%,
35    25% 77%,
36    32% 77%,
37    37% 75%,
38    40% 74%,
39    43% 74%,
40    46% 73%,
41    52% 72%,
42    57% 72%,
43    65% 74%,
44    66% 75%,
45    71% 78%,
46    75% 82%,
47    81% 86%,
48    83% 88%,
49    88% 91%,
50    90% 94%,
51    94% 96%,
52    98% 98%,
53    100% 100%,
54    82% 100%,
55    0 100%
56  );
57  background: #8792eb;
58  transition: 0.2s ease;
59}
60
61button::before {
62  position: absolute;
63  content: "";
64  /*   bottom: 80%; */
65  transform: rotate(180deg);
66  width: 100%;
67  height: 10%;
68  transition: 0.2s ease;
69  /*   bottom:; */
70  z-index: -1;
71  clip-path: polygon(
72    0% 74%,
73    4% 75%,
74    8% 76%,
75    11% 77%,
76    15% 78%,
77    20% 78%,
78    25% 77%,
79    32% 77%,
80    37% 75%,
81    40% 74%,
82    43% 74%,
83    46% 73%,
84    52% 72%,
85    57% 72%,
86    65% 74%,
87    66% 75%,
88    71% 78%,
89    75% 82%,
90    81% 86%,
91    83% 88%,
92    88% 91%,
93    90% 94%,
94    94% 96%,
95    98% 98%,
96    100% 100%,
97    82% 100%,
98    0 100%
99  );
100  background: #8792eb;
101}
102
103button:hover::after {
104  clip-path: polygon(
105    0 30%,
106    9% 34%,
107    7% 39%,
108    11% 43%,
109    13% 33%,
110    17% 30%,
111    24% 34%,
112    25% 35%,
113    30% 31%,
114    30% 38%,
115    39% 33%,
116    35% 43%,
117    43% 45%,
118    55% 46%,
119    65% 74%,
120    67% 66%,
121    81% 57%,
122    75% 82%,
123    81% 86%,
124    83% 88%,
125    88% 91%,
126    90% 94%,
127    94% 96%,
128    98% 98%,
129    100% 100%,
130    82% 100%,
131    0 100%
132  );
133  height: 80%;
134}
135
136button:hover::before {
137  clip-path: polygon(
138    0 30%,
139    9% 34%,
140    7% 39%,
141    11% 43%,
142    13% 33%,
143    17% 30%,
144    24% 34%,
145    25% 35%,
146    30% 31%,
147    30% 38%,
148    39% 33%,
149    35% 43%,
150    43% 45%,
151    55% 46%,
152    65% 74%,
153    67% 66%,
154    81% 57%,
155    75% 82%,
156    81% 86%,
157    83% 88%,
158    88% 91%,
159    90% 94%,
160    94% 96%,
161    98% 98%,
162    100% 100%,
163    82% 100%,
164    0 100%
165  );
166  height: 80%;
167}
168