galaxy/Buttons/VashonG_afraid-lion-76.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>

<style>
/* From Uiverse.io by VashonG  - Tags: button */
.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;
}

</style>