#e8e8e8
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
7.6K views
7.6K views
Comments
1omriluz 24. October at 13:02
24. October at 13:02
Great use of clip path here
MIT License