Button by barisdogansutcu
#e8e8e8
1.button { 2 cursor: pointer; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 gap: 10px; 7 font-size: 14px; 8 background-image: linear-gradient(#3470fa, #313ed7); 9 color: white; 10 border: solid 2px #0618db; 11 height: 50px; 12 padding: 0px 20px; 13 border-radius: 5px; 14 font-weight: 600; 15 transform: scale(0.89); 16 position: relative; 17} 18.button:not(:hover) .hide, 19.button:not(:hover) .icon::before, 20.button:not(:hover) .icon::after { 21 opacity: 0; 22 visibility: hidden; 23 transform: scale(1.4); 24} 25.hide { 26 transition: all 0.2s ease; 27} 28.button:active { 29 background-image: linear-gradient(#313ed7, #3470fa); 30 border-color: #313ed7; 31} 32.icon { 33 position: relative; 34} 35.icon::before { 36 content: ""; 37 position: absolute; 38 left: 0; 39 top: 0; 40 width: 6px; 41 height: 6px; 42 transform: translate(-50%, -50%); 43 background-color: rgb(255, 0, 170); 44 border-radius: 100%; 45} 46.icon::after { 47 content: ""; 48 position: absolute; 49 right: 0; 50 bottom: 0; 51 transform: translate(-19%, -60%); 52 width: 100px; 53 height: 33px; 54 background-color: transparent; 55 border-radius: 12px 22px 2px 2px; 56 border-right: solid 2px rgb(255, 0, 170); 57 border-top: solid 2px transparent; 58} 59.icon .text-icon { 60 color: rgb(255, 0, 170); 61 position: absolute; 62 font-size: 12px; 63 left: -37px; 64 top: -38px; 65} 66.icon svg { 67 width: 20px; 68 height: 20px; 69 border: solid 2px transparent; 70 display: flex; 71} 72.button:hover .icon svg { 73 border: solid 2px rgba(255, 0, 170, 0.692); 74} 75.padding-left { 76 position: absolute; 77 width: 20px; 78 height: 2px; 79 background-color: rgb(255, 0, 170); 80 left: 0; 81 top: 50%; 82 transform: translateY(-50%); 83} 84.padding-left:before { 85 content: ""; 86 width: 2px; 87 height: 10px; 88 background-color: rgb(255, 0, 170); 89 position: absolute; 90 left: 0; 91 top: 50%; 92 transform: translateY(-50%); 93} 94.padding-left:after { 95 content: ""; 96 width: 2px; 97 height: 10px; 98 background-color: rgb(255, 0, 170); 99 position: absolute; 100 right: 0; 101 top: 50%; 102 transform: translateY(-50%); 103} 104.padding-left-line { 105 position: absolute; 106 width: 30px; 107 height: 2px; 108 background-color: rgb(255, 0, 170); 109 left: -24px; 110 top: 11px; 111 transform: rotate(-50deg); 112} 113.padding-left-line::before { 114 content: ""; 115 position: absolute; 116 left: 0; 117 top: 0; 118 width: 6px; 119 height: 6px; 120 transform: translate(-50%, -50%); 121 background-color: rgb(255, 0, 170); 122 border-radius: 100%; 123} 124.padding-left-text { 125 color: rgb(255, 0, 170); 126 font-size: 12px; 127 position: absolute; 128 white-space: nowrap; 129 transform: rotate(50deg); 130 bottom: 30px; 131 left: -67px; 132} 133 134.padding-right { 135 position: absolute; 136 width: 20px; 137 height: 2px; 138 background-color: rgb(255, 0, 170); 139 right: 0; 140 top: 50%; 141 transform: translateY(-50%); 142} 143.padding-right:before { 144 content: ""; 145 width: 2px; 146 height: 10px; 147 background-color: rgb(255, 0, 170); 148 position: absolute; 149 left: 0; 150 top: 50%; 151 transform: translateY(-50%); 152} 153.padding-right:after { 154 content: ""; 155 width: 2px; 156 height: 10px; 157 background-color: rgb(255, 0, 170); 158 position: absolute; 159 right: 0; 160 top: 50%; 161 transform: translateY(-50%); 162} 163.padding-right-line { 164 position: absolute; 165 width: 30px; 166 height: 2px; 167 background-color: rgb(255, 0, 170); 168 right: -24px; 169 top: 11px; 170 transform: rotate(50deg); 171} 172.padding-right-line::before { 173 content: ""; 174 position: absolute; 175 left: 30px; 176 top: 0; 177 width: 6px; 178 height: 6px; 179 transform: translate(-50%, -50%); 180 background-color: rgb(255, 0, 170); 181 border-radius: 100%; 182} 183.padding-right-text { 184 color: rgb(255, 0, 170); 185 font-size: 12px; 186 position: absolute; 187 white-space: nowrap; 188 transform: rotate(-50deg); 189 bottom: 33px; 190 left: 18px; 191} 192.background { 193 position: absolute; 194} 195.background::before { 196 content: ""; 197 position: absolute; 198 right: 27px; 199 bottom: -70px; 200 width: 100px; 201 height: 53px; 202 background-color: transparent; 203 border-radius: 0px 0px 22px 22px; 204 border-right: solid 2px rgb(255, 0, 170); 205 border-bottom: solid 2px transparent; 206} 207.background::after { 208 content: ""; 209 position: absolute; 210 right: 25px; 211 bottom: -20px; 212 width: 6px; 213 height: 6px; 214 background-color: rgb(255, 0, 170); 215 border-radius: 100%; 216} 217.background-text { 218 position: absolute; 219 color: rgb(255, 0, 170); 220 font-size: 12px; 221 bottom: -70px; 222 left: -115px; 223} 224.border { 225 position: absolute; 226 right: 0; 227 top: 0; 228} 229.border:before { 230 content: ""; 231 width: 15px; 232 height: 15px; 233 border: solid 2px rgb(255, 0, 170); 234 position: absolute; 235 right: 0%; 236 top: 0; 237 transform: translate(50%, -50%); 238 border-radius: 100%; 239} 240.border:after { 241 content: ""; 242 width: 2px; 243 height: 25px; 244 background-color: rgb(255, 0, 170); 245 position: absolute; 246 right: -10px; 247 top: -15px; 248 transform: translate(50%, -50%) rotate(60deg); 249} 250.border .border-text { 251 position: absolute; 252 color: rgb(255, 0, 170); 253 font-size: 12px; 254 right: -112px; 255 top: -30px; 256 white-space: nowrap; 257} 258
1.9K views
1.9K views
faxriddin20 1. December 2023. at 15:13
1. December 2023. at 15:13
amazing
adamgiebl
Pro+
23. November 2023. at 12:5623. November 2023. at 12:56
really cool!
Variations
1 MIT License