1button {
2 border: none;
3 width: 140px;
4 height: 55px;
5 color: #fff;
6 font-family: "Arial";
7 letter-spacing: 1.2px;
8 font-weight: bold;
9 z-index: 1;
10 display: flex;
11 background: #000;
12 position: relative;
13}
14
15button p {
16 margin: 0 auto;
17 align-self: center;
18 font-size: 1.5em;
19 text-align: center;
20}
21
22button::after, button::before {
23 position: absolute;
24 content: "";
25 width: 100%;
26 z-index: -1;
27 height: 10%;
28 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%);
29 background: #97c45d;
30 transition: 0.2s cubic-bezier(.02,.02,.23,.73);
31}
32
33button::after {
34 bottom: 0;
35}
36
37button::before {
38 transform: rotate(180deg);
39}
40
41button:hover::after {
42 clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');
43 height: 30%;
44}
45
46button:hover::before {
47 clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');
48 height: 100%;
49}
50