#e8e8e8
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
841 views
841 views
Comments
MIT License