This post is saved as a draft.
#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 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
Variation of abutton
Variation of abutton