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}
11
12button p {
13 margin: 0 auto;
14 align-self: center;
15 font-size: 17px;
16 font-weight: bold;
17 text-align: center;
18}
19
20button::after {
21 position: absolute;
22 content: "";
23 width: 100%;
24 z-index: -1;
25 height: 10%;
26 bottom: 0;
27 clip-path: polygon(0% 74%, 4% 75%, 8% 76%, 11% 77%, 15% 78%, 20% 78%, 25% 77%, 32% 77%, 37% 75%, 40% 74%, 43% 74%, 46% 73%, 52% 72%, 57% 72%, 65% 74%, 66% 75%, 71% 78%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
28 background: #8792eb;
29 transition: 0.2s ease;
30}
31
32button::before {
33 position: absolute;
34 content: "";
35/*   bottom: 80%; */
36 transform: rotate(180deg);
37 width: 100%;
38 height: 10%;
39 transition: 0.2s ease;
40/*   bottom:; */
41 z-index: -1;
42 clip-path: polygon(0% 74%, 4% 75%, 8% 76%, 11% 77%, 15% 78%, 20% 78%, 25% 77%, 32% 77%, 37% 75%, 40% 74%, 43% 74%, 46% 73%, 52% 72%, 57% 72%, 65% 74%, 66% 75%, 71% 78%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
43 background: #8792eb;
44}
45
46button:hover::after {
47 clip-path: polygon(0 30%, 9% 34%, 7% 39%, 11% 43%, 13% 33%, 17% 30%, 24% 34%, 25% 35%, 30% 31%, 30% 38%, 39% 33%, 35% 43%, 43% 45%, 55% 46%, 65% 74%, 67% 66%, 81% 57%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
48 height: 80%;
49}
50
51button:hover::before {
52 clip-path: polygon(0 30%, 9% 34%, 7% 39%, 11% 43%, 13% 33%, 17% 30%, 24% 34%, 25% 35%, 30% 31%, 30% 38%, 39% 33%, 35% 43%, 43% 45%, 55% 46%, 65% 74%, 67% 66%, 81% 57%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
53 height: 80%;
54}
55
56