پیشنمایش زنده
کد HTML
<div class="relative inline-block w-full py-3 modgp">
<div class="relative">
<button
class="inline-flex items-center justify-center bg-primary text-sm text-white font-medium rounded-lg enabled:hover:bg-primary-dark enabled:hover:shadow-md enabled:active:bg-primary-dark enabled:focus:bg-primary-dark focus:outline-none px-4 py-2 w-full py-2.5 relative disabled:opacity-50 transition-all"
type="button"
>
<div class="w-full flex items-center justify-center">
Let the Magic Begin
</div>
</button>
</div>
<div class="absolute inset-0 pointer-events-none">
<div
id="style-AQliM"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-AQliM"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="6"
width="6"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
<div
id="style-WCb99"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-WCb99"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="9"
width="9"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
<div
id="style-dBNZV"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-dBNZV"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="7"
width="7"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
<div
id="style-tiisO"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-tiisO"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="6"
width="6"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
<div
id="style-re9B7"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-re9B7"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="9"
width="9"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
<div
id="style-BKG4G"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-BKG4G"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="5"
width="5"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
<div
id="style-NaoVe"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-NaoVe"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="6"
width="6"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
<div
id="style-pwIlv"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-pwIlv"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="9"
width="9"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
<div
id="style-QmcAd"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-QmcAd"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="5"
width="5"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
<div
id="style-VG2eL"
class="pointer-events-none absolute z-10 animate-magic-sparkle style-VG2eL"
>
<svg
style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
fill="none"
viewBox="0 0 68 68"
height="9"
width="9"
class="animate-spin-slow"
>
<path
fill="white"
d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
></path>
</svg>
</div>
</div>
</div>
کد CSS
.relative {
position: relative;
}
.inline-block {
display: inline-block;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
:backdrop {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
}
.pointer-events-none {
pointer-events: none;
}
.absolute {
position: absolute;
}
.inset-0 {
inset: 0;
}
button {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
width: 250px !important;
border: none;
}
button {
text-transform: none;
}
button {
cursor: pointer;
}
.inline-flex {
display: inline-flex;
}
.justify-center {
justify-content: center;
}
.rounded-lg {
border-radius: 0.5rem;
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(36 118 251 / var(--tw-bg-opacity));
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-medium {
font-weight: 500;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
#style-AQliM.style-AQliM {
top: 1%;
left: 99%;
}
#style-WCb99.style-WCb99 {
top: 7%;
left: 1%;
}
#style-dBNZV.style-dBNZV {
top: 93%;
left: 23%;
}
#style-tiisO.style-tiisO {
top: 43%;
left: 15%;
}
#style-re9B7.style-re9B7 {
top: 93%;
left: 9%;
}
#style-BKG4G.style-BKG4G {
top: 21%;
left: 88%;
}
#style-NaoVe.style-NaoVe {
top: 99%;
left: 95%;
}
#style-pwIlv.style-pwIlv {
top: 64%;
left: 99%;
}
#style-QmcAd.style-QmcAd {
top: 14%;
left: 45%;
}
#style-VG2eL.style-VG2eL {
top: 2%;
left: 48%;
}
/* Keyframes for sparkle animation */
@keyframes sparkle {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Add animation to sparkle elements */
.animate-magic-sparkle {
animation: sparkle 2s infinite;
}
.style-AQliM {
animation-delay: 0.5s;
}
.style-WCb99 {
animation-delay: 0.33s;
}
.style-dBNZV {
animation-delay: 0.6s;
}
.style-tiisO {
animation-delay: 0.9s;
}
.style-re9B7 {
animation-delay: 1.2s;
}
.style-BKG4G {
animation-delay: 1.5s;
}
.style-NaoVe {
animation-delay: 1.8s;
}
.style-pwIlv {
animation-delay: 1.9s;
}
.style-QmcAd {
animation-delay: 1.4s;
}
.style-VG2eL {
animation-delay: 1.7s;
}