galaxy/Buttons/Yatsu68_ancient-ladybug-46.html

<button>
    <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 512 512" xml:space="preserve" fill="#c673d9" transform="rotate(-35)">
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
        <g id="SVGRepo_iconCarrier">
          
          <g>
            <polygon class="st0" points="154.219,205.188 166.219,335.031 110.922,405.563 96.406,296.563"></polygon>
            <polygon class="st0" points="357.781,205.188 345.766,335.031 401.063,405.563 415.594,296.563"></polygon>
            <path class="st0" d="M323.813,62.219C305.125,23.328,275.656,0,256,0s-49.125,23.344-67.813,62.219H323.813z"></path>
            <path class="st0" d="M331.328,80.469H180.672c-6.641,19.156-10.594,41.094-10.047,65.188 c1.609,69.063,18.047,190.984,18.047,190.984l122.641-0.016l12,0.016c0,0,16.453-121.938,18.031-190.984 C341.922,121.563,337.969,99.609,331.328,80.469z M256,231.031c-23.578,0-42.688-19.094-42.688-42.672s19.125-42.672,42.688-42.672 s42.672,19.094,42.656,42.672C298.672,211.938,279.563,231.031,256,231.031z"></path>
            <path class="st0" d="M429.516,512c-6.109-17.594-22.859-30.219-42.531-30.219c-6.297,0-12.297,1.281-17.766,3.625 c-1.875-20.578-19.188-36.688-40.25-36.688c-3.047,0-6,0.328-8.844,0.969c0.031-0.563,0.031-1.125,0.031-1.688 c0-15.531-12.594-28.125-28.125-28.125c-4.031,0-7.875,0.844-11.344,2.375c-9.734-17.219-12.563-62.156-12.563-62.156h-25.5 c0,0-3.266,49.344-14.813,65.688c-2.688-1.094-5.656-1.688-8.75-1.688c-13.016,0-23.563,10.547-23.563,23.563 c0,0.984,0.063,1.953,0.188,2.906c-3.719-1.203-3.281-1.844-7.406-1.844c-16.484,0-30.531,10.406-35.938,25 c-6.047-2.516-12.672-3.906-19.625-3.906c-25.156,0-46.063,18.219-50.234,42.188H429.516z"></path>
          </g>
        </g>
    </svg>
    <span>aim for the stars!</span>
</button>
<style>
/* From Uiverse.io by Yatsu68 - Tags: button */
button {
  all: unset;
  background-color: #1b2164;
  color: #fff;
  border-radius: 8px;
  padding: 1rem;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

button span {
  letter-spacing: 1.2px;
  padding-left: 0.8rem;
  padding-right: 0.6rem;
  font-weight: 600;
}

button:hover {
  background: linear-gradient(-45deg, #1b2164, #6a33a8, #1b2164, #2ba6f5);
  background-size: 400% 400%;
  -webkit-transform: scale(1.01);
  -ms-transform: scale(1.01);
  transform: scale(1.01);
  -webkit-animation: scaling-and-gradient 10s ease infinite;
  animation: scaling-and-gradient 10s ease infinite;
}

button svg {
  text-shadow: 0px 7px rgba(81,67,21,0.8), 
	  -3px 0px 7px rgba(81,67,21,0.8), 
	  0px 4px 7px rgba(81,67,21,0.8);
  -webkit-animation: slide-in 1.6s ease-out both;
  animation: slide-in 1.6s ease-out both;
}

button:active svg {
  -webkit-animation: slide-out 0.4s ease-in forwards;
  animation: slide-out 0.4s ease-in forwards;
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateY(0) translateX(0) rotate(-35);
    transform: translateY(0) translateX(0) rotate(-35);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-300px) translateX(-300px);
    transform: translateY(-300px) translateX(-300px);
    opacity: 0;
  }
}

@keyframes slide-out {
  0% {
    -webkit-transform: translateY(0) translateX(0) rotate(-35);
    transform: translateY(0) translateX(0) rotate(-35);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-300px) translateX(-300px);
    transform: translateY(-300px) translateX(-300px);
    opacity: 0;
  }
}

@-webkit-keyframes slide-in {
  0% {
    -webkit-transform: translateY(300px) translateX(300px);
    transform: translateY(300px) translateX(300px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) translateX(0) rotate(-35);
    transform: translateY(0) translateX(0) rotate(-35);
    opacity: 1;
  }
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateY(300px) translateX(300px);
    transform: translateY(300px) translateX(300px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) translateX(0) rotate(-35);
    transform: translateY(0) translateX(0) rotate(-35);
    opacity: 1;
  }
}

@-webkit-keyframes scaling-and-gradient {
  0% {
    background-position: 0% 50%;
    scale: 1;
  }

  25% {
    scale: 1.04;
  }

  50% {
    background-position: 100% 50%;
    scale: 1.06;
  }

  50% {
    scale: 1.04;
  }

  100% {
    background-position: 0% 50%;
    scale: 1;
  }
}

@keyframes scaling-and-gradient {
  0% {
    background-position: 0% 50%;
    scale: 1;
  }

  25% {
    scale: 1.04;
  }

  50% {
    background-position: 100% 50%;
    scale: 1.06;
  }

  50% {
    scale: 1.04;
  }

  100% {
    background-position: 0% 50%;
    scale: 1;
  }
}
</style>