galaxy/Buttons/wizard503_breezy-tiger-28.html

<div class="btn-container">
  <button type="submit" name="space-button" id="space-btn">
    <span>Look Up</span>
    <span class="moon"><span class="moon1"></span></span>
    <span class="planet"></span>
    <div class="star" style="left: 119.273px;
        top: 18.0747px;
        animation-delay: 3.37051s;
        transform: scale(1.1);"></div>
    <div class="star" style="left: 22.2022px;
        top: 10.69534px;
        animation-delay: 4.9s;
        transform: scale(2.22);"></div>
    <div class="star" style="left: 14.754px;
        top: 25.2924px;
        animation-delay: 0.05s;
        transform: scale(0.1);"></div>
    <div class="star" style="left: 95.948px;
        top: 54.8942px;
        animation-delay: 3.1s;
        transform: scale(1.87);"></div>
    <div class="star" style="left: 184.622px;
        top: 20.0923px;
        animation-delay: 2.8s;
        transform: scale(1.77);"></div>
    <div class="star" style="left: 142.1px;
        top: 22.3542px;
        animation-delay: 2.73988s;
        transform: scale(1.62715);"></div>
    <div class="star" style="left: 145.079px;
        top: 6.97553px;
        animation-delay: 0.0408754s;
        transform: scale(0.468075);"></div>
    <div class="star" style="left: 42.2308px;
        top: 9.78383px;
        animation-delay: 4.58407s;
        transform: scale(0.0422065);"></div>
    <div class="star" style="left: 91.2734px;
        top: 14.0408px;
        animation-delay: 2.05927s;
        transform: scale(0.11997);"></div>
    <div class="star" style="left: 35.6985px;
        top: 52.6403px;
        animation-delay: 3.07343s;
        transform: scale(0.672992);"></div>
    <div class="star" style="left: 76.4191px;
        top: 48.453px;
        animation-delay: 2.35679s;
        transform: scale(2.001);"></div>
    <div class="star" style="left: 154.027px;
        top: 45.9848px;
        animation-delay: 3.723s;
        transform: scale(1.4118);"></div>
    <div class="star" style="left: 110.241px;
        top: 20.2684px;
        animation-delay: 2.94906s;
        transform: scale(1.2193);"></div>
    <div class="star" style="left: 12.602px;
        top: 19.8836px;
        animation-delay: 4.072s;
        transform: scale(1.49026);"></div>
    <div class="star" style="left: 30.0911px;
        top: 37.9746px;
        animation-delay: 1.02002s;
        transform: scale(1.41008);"></div>
    <div class="star" style="left: 62.3096px;
        top: 9.64604px;
        animation-delay: 3.9445s;
        transform: scale(0.231214);"></div>
    <div class="star" style="left: 44.7189px;
        top: 32.4307px;
        animation-delay: 4.78921s;
        transform: scale(0.359408);"></div>
    <div class="star" style="left: 191.866px;
        top: 27.151px;
        animation-delay: 1.34451s;
        transform: scale(1.13484);"></div>
    <div class="star" style="left: 47.6744px;
        top: 3.00604px;
        animation-delay: 1.04567s;
        transform: scale(0.682023);"></div>
    <div class="star" style="left: 98.6225px;
        top: 49.6115px;
        animation-delay: 2.41384s;
        transform: scale(1.96254);"></div>
    <div class="star" style="left: 57.4785px;
        top: 29.6588px;
        animation-delay: 3.3569s;
        transform: scale(1.53118);"></div>
    <div class="star" style="left: 13.2213px;
        top: 24.538px;
        animation-delay: 1.69582s;
        transform: scale(1.6236);"></div>
    <div class="star" style="left: 56.9067px;
        top: 51.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 139.8361px;
        top: 45.3876px;
        animation-delay: 1.28648s;
        transform: scale(0.566118);"></div>
    <div class="star" style="right: 40.9067px;
        top: 21.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 30.9067px;
        top: 26.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 30.9067px;
        top: 16.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 20.9067px;
        top: 10.904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 40.9067px;
        top: 8.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 80.9067px;
        top: 8.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 100.9067px;
        top: 6.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 130.9067px;
        top: 8.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 80.9067px;
        top: 5.9904px;
        animation-delay: 4.74375s;
        transform: scale(1.9999998);"></div>
    <div class="star" style="right: 45.9067px;
        top: 35.9904px;
        animation-delay: 4.74375s;
        transform: scale(1.999998);"></div>
    <div class="star" style="right: 85.9067px;
        top: 44.9904px;
        animation-delay: 4.74375s;
        transform: scale(1.99998998);"></div>
  </button>
</div>

<style>
/* From Uiverse.io by wizard503 - Tags: button */
button#space-btn {
  width: 200px;
  height: 60px;
  position: relative;
  border: none;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: inset 0px 0px 21px #3b2ad5;
  background: #03001e;
  cursor: pointer;
}

button#space-btn:hover {
  background: linear-gradient(180deg, #3b2ad5 0%,#88007d 60%,#ff0055c4 100%);
  box-shadow: 0px 5px 10px #03001e,inset 0px 5px 10px #8611d4,inset 0 -5px 10px #ff0055a1;
}

.btn-container:hover {
  background: #03001e;
  box-shadow: 0px -10px 40px #9611d4,0px 5px 10px #00a2ffe3,inset 0px 10px 21px #3b2ad5;
}

.btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
  width: 205px;
  height: 65px;
  background: linear-gradient(0deg, #88007d 0%,#ff0055c4 100%);
}

button span {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

button div.star {
  opacity: 0;
  position: absolute;
  border-radius: 100%;
  background-color: white;
  width: 1px;
  height: 1px;
}

button:hover .star {
  opacity: 1;
}

button .planet {
  margin-left: -2.5em;
  opacity: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  position: absolute;
  background: linear-gradient(rgb(255, 0, 0), transparent),linear-gradient(to top left, rgb(255, 0, 212), transparent), linear-gradient(to top right, rgb(251, 255, 0), transparent);
  background-blend-mode: screen;
  background-size: 100% 200%;
  filter: drop-shadow(0px 0px 4px rgb(82, 59, 16));
}

button:hover .planet {
  z-index: 1;
  opacity: 1;
  animation: orbita 6s reverse linear infinite;
}

.planet::after {
  content: '';
  width: 40px;
  height: 10px;
  border: 3px solid #813dff;
  filter: drop-shadow(0px 0px 1px #cf3333);
  border-width: 0px 3px 3px 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  border-radius: 50%;
}

.planet::before {
  position: absolute;
  color: rgb(255, 0, 0);
  visibility: hidden;
}

.moon {
  margin-left: -3rem;
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0px 0px 10px 5px rgb(146, 146, 140);
}

.moon::after {
  position: absolute;
  content: '';
  margin-top: 15%;
  box-shadow: 0px 0px 10px 3px #333;
  margin-left: -10%;
  border-radius: 100%;
  width: 3px;
  height: 3px;
  background-color: rgb(121, 121, 121);
}

.moon1::after {
  position: absolute;
  content: '';
  margin-top: 65%;
  box-shadow: 0px 0px 8px 3px #333;
  margin-left: -9px;
  border-radius: 100%;
  width: 2px;
  height: 2px;
  background-color: rgb(121, 121, 121);
}

.moon::before {
  position: absolute;
  content: '';
  margin-top: 30%;
  margin-left: -30%;
  border-radius: 100%;
  box-shadow: 0px 0px 8px 1px rgb(3, 3, 3);
  width: 5px;
  height: 5px;
  background-color: rgb(134, 133, 133);
}

.moon1::before {
  position: absolute;
  content: '';
  margin-top: 70%;
  margin-left: 4%;
  border-radius: 100%;
  box-shadow: -5px 1px 4px 3px rgb(134, 133, 133);
  width: 2px;
  height: 2px;
  background-color: rgb(134, 133, 133);
}

button span.moon,span.moon1 {
  opacity: 0;
}

button:hover span.moon,span.moon1 {
  z-index: -1;
  opacity: 1;
  animation: orbita 2.7s linear infinite;
}

@keyframes orbita {
  0% {
    transform: rotate(0deg);
    transform: translateX(90px);
  }

  100% {
    rotate: 360deg;
    transform: translateX(90px);
  }
}
</style>