Button by StealthWorm
This button was created for Button Mastery
#e8e8e8
1.btn { 2 z-index: 0; 3 overflow: hidden; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 cursor: pointer; 8 padding: 4px; 9 width: 20rem; 10 height: 6rem; 11 border-top: 2px double #ffffff92; 12 border-bottom: none; 13 border-left: 2px outset #0000007e; 14 border-right: 2px solid #e94fcab3; 15 border-radius: 1.8rem; 16 background-origin: border-box; 17 background-clip: content-box, border-box; 18 filter: hue-rotate(-15deg) drop-shadow(0px 30px 10px #00000028) saturate(2); 19 20 background: linear-gradient( 21 64.14deg, 22 #b938ff 0%, 23 #daa1f1 10%, 24 #f179ec 15.58%, 25 #fefffe 28.15%, 26 #fc9f9d 45.31%, 27 #ed8664 53.18%, 28 #ff7423 58.79%, 29 #ff875f 65.28%, 30 #fbabae 75.48%, 31 #fcbde5 85.31%, 32 #e94fca 100.29% 33 ); 34 transition: all 0.5s; 35} 36 37.btn:hover { 38 transform: scale(1.1); 39 filter: hue-rotate(-365deg) drop-shadow(0px 30px 10px #00000028) saturate(2); 40} 41 42.btn:hover .title > strong { 43 font-size: 1.2rem; 44 font-weight: 800; 45 transition: all 0.8s; 46} 47 48.glass { 49 z-index: 10; 50 display: flex; 51 border: double 2px rgba(255, 255, 255, 0.263); 52 backdrop-filter: blur(2px); 53 filter: blur(1px) brightness(1.1) saturate(50%) hue-rotate(30deg); 54 border-radius: 1.6rem; 55 width: 100%; 56 height: 100%; 57 padding: 1rem; 58 background-color: #ffffff1c; 59 background-origin: content-box; 60 background-clip: content-box, border-box; 61 box-shadow: inset 0 0 10px #a84fd88d; 62} 63 64.inner-glass { 65 z-index: 10; 66 display: flex; 67 border-left: 1px solid rgba(255, 255, 255, 0.564); 68 border-right: 1px solid rgb(255, 255, 255); 69 backdrop-filter: blur(40px); 70 box-shadow: inset 0 0 20px rgba(246, 142, 213, 0.86); 71 -webkit-backdrop-filter: blur(5px); 72 border-radius: 0.6rem; 73 width: 100%; 74 height: 100%; 75 background-origin: border-box; 76 background-clip: content-box, border-box; 77 filter: brightness(140%); 78} 79 80.title { 81 inset: 0; 82 display: flex; 83 text-align: center; 84 width: 100%; 85 height: 100%; 86 position: absolute; 87 z-index: 90; 88 align-items: center; 89 justify-content: center; 90 color: black; 91 font-size: 1rem; 92 gap: 0.5rem; 93} 94 95.thunder { 96 display: flex; 97 align-items: center; 98 justify-content: center; 99 filter: grayscale(100%) brightness(0); 100 font-size: 1.2rem; 101} 102 103.description { 104 font-size: 1.2rem; 105 font-weight: 600; 106} 107 108.smoke { 109 z-index: 90; 110 inset: 0; 111 display: flex; 112 align-items: center; 113 justify-content: center; 114 width: 100%; 115 height: 100%; 116 position: absolute; 117} 118 119.cloud { 120 position: absolute; 121 border-radius: 9999px; 122} 123 124.cloud:nth-of-type(1) { 125 filter: blur(3px) drop-shadow(-2px 0 3px #ffffff); 126 display: flex; 127 left: 1.6rem; 128 top: 0.2rem; 129 width: 10rem; 130 height: 1rem; 131 background: linear-gradient( 132 to right, 133 rgba(255, 255, 255, 0.868) 30%, 134 transparent 100% 135 ); 136} 137 138.cloud:nth-of-type(2) { 139 left: 2.5rem; 140 top: 2rem; 141 width: 4rem; 142 height: 2rem; 143 background: radial-gradient( 144 circle, 145 rgba(255, 255, 255, 1) 0%, 146 rgba(255, 255, 255, 0) 70% 147 ); 148 /* border: 1px solid red; */ 149 filter: drop-shadow(-10px 10px 3px #d277cc); 150} 151 152.cloud:nth-of-type(3) { 153 left: 10rem; 154 top: 0.5rem; 155 width: 5rem; 156 height: 5rem; 157 background: radial-gradient( 158 circle, 159 rgba(255, 255, 255, 1) 0%, 160 rgba(255, 255, 255, 0) 50% 161 ); 162 /* border: 1px solid red; */ 163 filter: drop-shadow(-5px -5px 7px #ff5500b4); 164} 165 166.cloud:nth-of-type(4) { 167 left: 17rem; 168 top: 1rem; 169 width: 3.4rem; 170 height: 4rem; 171 background: radial-gradient( 172 circle, 173 rgba(255, 255, 255, 1) 0%, 174 transparent 70% 175 ); 176 /* border: 1px solid red; */ 177 filter: drop-shadow(-1px 0 30px #ff002f); 178} 179 180.cloud:nth-of-type(5) { 181 top: 0.5rem; 182 width: 100%; 183 height: 0.7rem; 184 background: radial-gradient( 185 circle, 186 rgba(255, 255, 255, 0.293) 30%, 187 rgba(255, 181, 21, 0.164) 50%, 188 rgba(234, 44, 255, 0.419) 60%, 189 rgba(255, 255, 255, 0) 90% 190 ); 191} 192 193.cloud:nth-of-type(6) { 194 left: 17.6rem; 195 top: -0.1rem; 196 width: 2rem; 197 height: 2rem; 198 background: radial-gradient( 199 circle, 200 rgba(255, 255, 255, 1) 0%, 201 rgba(255, 255, 255, 0) 70% 202 ); 203} 204 205.cloud:nth-of-type(7) { 206 left: 7.6rem; 207 transform: rotate(-35deg); 208 top: -2rem; 209 width: 2rem; 210 height: 5rem; 211 background: radial-gradient( 212 circle, 213 rgba(255, 255, 255, 0.614) 0%, 214 #fd87602d 60%, 215 rgba(255, 255, 255, 0) 100% 216 ); 217} 218 219.cloud:nth-of-type(8) { 220 left: 5.5rem; 221 top: -1rem; 222 width: 3rem; 223 height: 3rem; 224 background: radial-gradient( 225 circle, 226 rgba(255, 255, 255, 0.614) 0%, 227 rgba(255, 255, 255, 0) 80% 228 ); 229} 230 231.cloud:nth-of-type(9) { 232 filter: blur(1px) drop-shadow(0px 0 3px #ffffff); 233 left: 0.5rem; 234 bottom: 1.4rem; 235 width: 100%; 236 height: 0.1rem; 237 background: radial-gradient( 238 circle, 239 rgba(255, 255, 255, 1) 50%, 240 rgba(255, 255, 255, 0) 90% 241 ); 242} 243 244.cloud:nth-of-type(10) { 245 filter: blur(1px) drop-shadow(0px 0 3px #ffffff); 246 display: flex; 247 left: 0.3rem; 248 top: 1rem; 249 width: 1rem; 250 height: 3rem; 251 border-top: 1px solid white; 252 border-right: 1px solid white; 253 border-bottom: none; 254 background: linear-gradient( 255 to bottom, 256 rgba(255, 255, 255, 0.419) 0%, 257 transparent 50% 258 ); 259} 260 261.cloud:nth-of-type(11) { 262 border-radius: 100%; 263 filter: blur(4px) drop-shadow(0px -10px 10px #ff5107fb); 264 display: flex; 265 left: 12rem; 266 top: 3.5rem; 267 width: 5rem; 268 height: 1.8rem; 269 background: radial-gradient( 270 circle, 271 rgba(255, 255, 255, 0.773) 10%, 272 rgba(255, 255, 255, 0.159) 60% 273 ); 274} 275 276.cloud:nth-of-type(12) { 277 filter: blur(2px) drop-shadow(0px -10px 10px #f36b9d); 278 display: flex; 279 left: 11rem; 280 top: 1.1rem; 281 width: 6rem; 282 height: 0.3rem; 283 background: radial-gradient( 284 circle, 285 rgba(255, 255, 255, 0.973) 30%, 286 rgba(255, 255, 255, 0.159) 100% 287 ); 288} 289 290.cloud:nth-of-type(13) { 291 filter: blur(3px) drop-shadow(-15px 0 5px #f8283d9e); 292 display: flex; 293 left: 8rem; 294 top: 3.7rem; 295 width: 5.5rem; 296 height: 1.7rem; 297 background: radial-gradient( 298 circle, 299 rgba(255, 255, 255, 0.762) 10%, 300 rgba(255, 255, 255, 0.159) 70% 301 ); 302} 303 304.cloud:nth-of-type(14) { 305 filter: blur(1px) drop-shadow(10px -10px 10px #6f0424); 306 transform: rotate(-35deg); 307 display: flex; 308 left: 0.5rem; 309 bottom: 0.3rem; 310 width: 0.5rem; 311 height: 1.2rem; 312 background: radial-gradient( 313 circle, 314 rgba(255, 255, 255, 0.848) 0%, 315 rgba(255, 255, 255, 0.159) 60% 316 ); 317} 318
635 views
635 views
MIT License