Button by marcelodolza
This button was created for Button Mastery 3
#eed7fd
1.button { 2 --white: #ffe7ff; 3 --purple-100: #f4b1fd; 4 --purple-200: #d190ff; 5 --purple-300: #c389f2; 6 --purple-400: #8e26e2; 7 --purple-500: #5e2b83; 8 --radius: 18px; 9 10 border-radius: var(--radius); 11 outline: none; 12 cursor: pointer; 13 font-size: 23px; 14 font-family: Arial; 15 background: transparent; 16 letter-spacing: -1px; 17 border: 0; 18 position: relative; 19 width: 220px; 20 height: 80px; 21 transform: rotate(353deg) skewX(4deg); 22} 23 24.bg { 25 position: absolute; 26 inset: 0; 27 border-radius: inherit; 28 filter: blur(1px); 29} 30.bg::before, 31.bg::after { 32 content: ""; 33 position: absolute; 34 inset: 0; 35 border-radius: calc(var(--radius) * 1.1); 36 background: var(--purple-500); 37} 38.bg::before { 39 filter: blur(5px); 40 transition: all 0.3s ease; 41 box-shadow: 42 -7px 6px 0 0 rgb(115 75 155 / 40%), 43 -14px 12px 0 0 rgb(115 75 155 / 30%), 44 -21px 18px 4px 0 rgb(115 75 155 / 25%), 45 -28px 24px 8px 0 rgb(115 75 155 / 15%), 46 -35px 30px 12px 0 rgb(115 75 155 / 12%), 47 -42px 36px 16px 0 rgb(115 75 155 / 8%), 48 -56px 42px 20px 0 rgb(115 75 155 / 5%); 49} 50 51.wrap { 52 border-radius: inherit; 53 overflow: hidden; 54 height: 100%; 55 transform: translate(6px, -6px); 56 padding: 3px; 57 background: linear-gradient( 58 to bottom, 59 var(--purple-100) 0%, 60 var(--purple-400) 100% 61 ); 62 position: relative; 63 transition: all 0.3s ease; 64} 65 66.outline { 67 position: absolute; 68 overflow: hidden; 69 inset: 0; 70 opacity: 0; 71 outline: none; 72 border-radius: inherit; 73 transition: all 0.4s ease; 74} 75.outline::before { 76 content: ""; 77 position: absolute; 78 inset: 2px; 79 width: 120px; 80 height: 300px; 81 margin: auto; 82 background: linear-gradient( 83 to right, 84 transparent 0%, 85 white 50%, 86 transparent 100% 87 ); 88 animation: spin 3s linear infinite; 89 animation-play-state: paused; 90} 91 92.content { 93 pointer-events: none; 94 display: flex; 95 align-items: center; 96 justify-content: center; 97 z-index: 1; 98 position: relative; 99 height: 100%; 100 gap: 16px; 101 border-radius: calc(var(--radius) * 0.85); 102 font-weight: 600; 103 transition: all 0.3s ease; 104 background: linear-gradient( 105 to bottom, 106 var(--purple-300) 0%, 107 var(--purple-400) 100% 108 ); 109 box-shadow: 110 inset -2px 12px 11px -5px var(--purple-200), 111 inset 1px -3px 11px 0px rgb(0 0 0 / 35%); 112} 113.content::before { 114 content: ""; 115 inset: 0; 116 position: absolute; 117 z-index: 10; 118 width: 80%; 119 top: 45%; 120 bottom: 35%; 121 opacity: 0.7; 122 margin: auto; 123 background: linear-gradient(to bottom, transparent, var(--purple-400)); 124 filter: brightness(1.3) blur(5px); 125} 126 127.char { 128 transition: all 0.3s ease; 129 display: flex; 130 align-items: center; 131 justify-content: center; 132} 133.char span { 134 display: block; 135 color: transparent; 136 position: relative; 137} 138.char span:nth-child(5) { 139 margin-left: 5px; 140} 141.char.state-1 span:nth-child(5) { 142 margin-right: -3px; 143} 144.char.state-1 span { 145 animation: charAppear 1.2s ease backwards calc(var(--i) * 0.03s); 146} 147.char.state-1 span::before, 148.char span::after { 149 content: attr(data-label); 150 position: absolute; 151 color: var(--white); 152 text-shadow: -1px 1px 2px var(--purple-500); 153 left: 0; 154} 155.char span::before { 156 opacity: 0; 157 transform: translateY(-100%); 158} 159.char.state-2 { 160 position: absolute; 161 left: 80px; 162} 163.char.state-2 span::after { 164 opacity: 1; 165} 166 167.icon { 168 animation: resetArrow 0.8s cubic-bezier(0.7, -0.5, 0.3, 1.2) forwards; 169 z-index: 10; 170} 171.icon div, 172.icon div::before, 173.icon div::after { 174 height: 3px; 175 border-radius: 1px; 176 background-color: var(--white); 177} 178.icon div::before, 179.icon div::after { 180 content: ""; 181 position: absolute; 182 right: 0; 183 transform-origin: center right; 184 width: 14px; 185 border-radius: 15px; 186 transition: all 0.3s ease; 187} 188.icon div { 189 position: relative; 190 width: 24px; 191 box-shadow: -2px 2px 5px var(--purple-400); 192 transform: scale(0.9); 193 background: linear-gradient(to bottom, var(--white), var(--purple-100)); 194 animation: swingArrow 1s ease-in-out infinite; 195 animation-play-state: paused; 196} 197.icon div::before { 198 transform: rotate(44deg); 199 top: 1px; 200 box-shadow: 1px -2px 3px -1px var(--purple-400); 201 animation: rotateArrowLine 1s linear infinite; 202 animation-play-state: paused; 203} 204.icon div::after { 205 bottom: 1px; 206 transform: rotate(316deg); 207 box-shadow: -2px 2px 3px 0 var(--purple-400); 208 background: linear-gradient(200deg, var(--white), var(--purple-100)); 209 animation: rotateArrowLine2 1s linear infinite; 210 animation-play-state: paused; 211} 212 213.path { 214 position: absolute; 215 z-index: 12; 216 bottom: 0; 217 left: 0; 218 right: 0; 219 stroke-dasharray: 150 480; 220 stroke-dashoffset: 150; 221 pointer-events: none; 222} 223 224.splash { 225 position: absolute; 226 top: 0; 227 left: 0; 228 pointer-events: none; 229 stroke-dasharray: 60 60; 230 stroke-dashoffset: 60; 231 transform: translate(-17%, -31%); 232 stroke: var(--purple-300); 233} 234 235/** STATES */ 236 237.button:hover .words { 238 opacity: 1; 239} 240.button:hover .words span { 241 animation-play-state: running; 242} 243 244.button:hover .char.state-1 span::before { 245 animation: charAppear 0.7s ease calc(var(--i) * 0.03s); 246} 247 248.button:hover .char.state-1 span::after { 249 opacity: 1; 250 animation: charDisappear 0.7s ease calc(var(--i) * 0.03s); 251} 252 253.button:hover .wrap { 254 transform: translate(8px, -8px); 255} 256 257.button:hover .outline { 258 opacity: 1; 259} 260 261.button:hover .outline::before, 262.button:hover .icon div::before, 263.button:hover .icon div::after, 264.button:hover .icon div { 265 animation-play-state: running; 266} 267 268.button:active .bg::before { 269 filter: blur(5px); 270 opacity: 0.7; 271 box-shadow: 272 -7px 6px 0 0 rgb(115 75 155 / 40%), 273 -14px 12px 0 0 rgb(115 75 155 / 25%), 274 -21px 18px 4px 0 rgb(115 75 155 / 15%); 275} 276.button:active .content { 277 box-shadow: 278 inset -1px 12px 8px -5px rgba(71, 0, 137, 0.4), 279 inset 0px -3px 8px 0px var(--purple-200); 280} 281 282.button:active .words, 283.button:active .outline { 284 opacity: 0; 285} 286 287.button:active .wrap { 288 transform: translate(3px, -3px); 289} 290 291.button:active .splash { 292 animation: splash 0.8s cubic-bezier(0.3, 0, 0, 1) forwards 0.05s; 293} 294 295.button:focus .path { 296 animation: path 1.6s ease forwards 0.2s; 297} 298 299.button:focus .icon { 300 animation: arrow 1s cubic-bezier(0.7, -0.5, 0.3, 1.5) forwards; 301} 302 303.char.state-2 span::after, 304.button:focus .char.state-1 span { 305 animation: charDisappear 0.5s ease forwards calc(var(--i) * 0.03s); 306} 307 308.button:focus .char.state-2 span::after { 309 animation: charAppear 1s ease backwards calc(var(--i) * 0.03s); 310} 311 312@keyframes spin { 313 0% { 314 transform: rotate(0deg); 315 } 316 100% { 317 transform: rotate(360deg); 318 } 319} 320 321@keyframes charAppear { 322 0% { 323 transform: translateY(50%); 324 opacity: 0; 325 filter: blur(20px); 326 } 327 20% { 328 transform: translateY(70%); 329 opacity: 1; 330 } 331 50% { 332 transform: translateY(-15%); 333 opacity: 1; 334 filter: blur(0); 335 } 336 100% { 337 transform: translateY(0); 338 opacity: 1; 339 } 340} 341 342@keyframes charDisappear { 343 0% { 344 transform: translateY(0); 345 opacity: 1; 346 } 347 100% { 348 transform: translateY(-70%); 349 opacity: 0; 350 filter: blur(3px); 351 } 352} 353 354@keyframes arrow { 355 0% { 356 opacity: 1; 357 } 358 50% { 359 transform: translateX(60px); 360 opacity: 0; 361 } 362 51% { 363 transform: translateX(-200px); 364 opacity: 0; 365 } 366 100% { 367 transform: translateX(-128px); 368 opacity: 1; 369 } 370} 371 372@keyframes swingArrow { 373 50% { 374 transform: translateX(5px) scale(0.9); 375 } 376} 377 378@keyframes rotateArrowLine { 379 50% { 380 transform: rotate(30deg); 381 } 382 80% { 383 transform: rotate(55deg); 384 } 385} 386 387@keyframes rotateArrowLine2 { 388 50% { 389 transform: rotate(330deg); 390 } 391 80% { 392 transform: rotate(300deg); 393 } 394} 395 396@keyframes resetArrow { 397 0% { 398 transform: translateX(-128px); 399 } 400 100% { 401 transform: translateX(0); 402 } 403} 404 405@keyframes path { 406 from { 407 stroke: white; 408 } 409 to { 410 stroke-dashoffset: -480; 411 stroke: #f9c6fe; 412 } 413} 414 415@keyframes splash { 416 to { 417 stroke-dasharray: 2 60; 418 stroke-dashoffset: -60; 419 } 420} 421
8K views
8K views
wonderful
i am unable to export it to react component
Mind blowing 👏❤. How can I get SVG animations like this ?
so amazing
mind blowing
Outstanding!✨
Bro we want a tutorial of animation like this @Youtube.
As always love the animations
I can't believe it! wowwwwwwww!!!!!!
Enters new challange > destroys the competition >refuses to elaborate further
Wow 😲
Fabulous that focus & active state effect is so so good.Definitely this will be my in favorites list.
beautiful
MIT License