Don't get lost · KitoC

About Don't get lost · KitoC

Don't get lost · KitoC is an animated CSS button by KitoC. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Hover effects, Icon, Animated

Using this example

Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

<button>
  <div class="blackhole">
    <span class="rocket-path">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="rocket"> <g> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M8.498 20h7.004A6.523 6.523 0 0 1 12 23.502 6.523 6.523 0 0 1 8.498 20zM18 14.805l2 2.268V19H4v-1.927l2-2.268V9c0-3.483 2.504-6.447 6-7.545C15.496 2.553 18 5.517 18 9v5.805zM12 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path> </g> </svg>
    </span>
    <span class="ring">
      <span class="block"></span>
    </span>
  </div>
  <span class="text">Don't get lost</span>
</button>

button {
  --black-hole-color-2: rgb(242, 122, 42);
  --black-hole-color: rgb(230, 148, 93);
  font-size: 17px;
  position: relative;
  background: #212121;
  padding: 0.5em;
  border: 2px solid var(--black-hole-color);
  border-radius: 8px;
}

button:hover {
  border: 2px solid var(--black-hole-color-2);
  animation: alert 1s alternate infinite linear;
}

.blackhole {
  padding: 3em;
  background-color: black;
  color: var(--black-hole-color);
  position: absolute;
  animation: wiggle 3s alternate-reverse infinite linear;
  top: -1em;
  left: -8em;
}

.blackhole, .blackhole::after, .blackhole::before, .blackhole .ring, .blackhole .ring::after {
  content: "";
  border: 2px solid var(--black-hole-color);
  border-radius: 50%;
  box-shadow: 0 0 3em,
              0 0 1em;
}

.blackhole::after, .blackhole::before {
  animation: writhe 3s alternate-reverse infinite linear;
}

.blackhole::before {
  position: absolute;
  width: calc(100% + 0.5em);
  height: calc(100% + 0.5em);
  top: -9px;
  left: -7px;
}

.blackhole::after {
  position: absolute;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  top: -6px;
  left: -5px;
}

.blackhole .ring, .blackhole .ring::after {
  content: "";
  position: absolute;
  left: -50%;
  width: 200%;
  border-top: none;
  height: 2em;
  border-width: 5px;
  box-shadow: 0px 5px 10px var(--black-hole-color);
}

.blackhole .ring, .blackhole .ring::after {
  animation: ring-writhe 3s alternate-reverse infinite linear;
}

.blackhole .block {
  position: absolute;
  z-index: 90;
  content: "";
  background-color: black;
  top: -20%;
  left: 25%;
  width: 50%;
  height: 10px;
}

.blackhole .ring::after {
  width: 110%;
  left: -8%;
}

.blackhole .rocket {
  fill: white;
  height: 30px;
  transform: rotate(-140deg);
  animation: idle 1s alternate-reverse infinite linear;
}

.blackhole .rocket-path {
  position: absolute;
  top: -60px;
  right: -60px;
}

button:hover .rocket-path, button:focus .rocket-path {
  z-index: 100;
  animation: engine-start 0.2s alternate-reverse infinite linear;
}

button:focus  .rocket-path {
  animation: descend 1.2s linear forwards, 
             descend-dissapear 0.1s linear forwards;
  animation-delay: 0s, 1s;
}

button .text {
  display: flex;
  color: white;
}

@keyframes idle {
  from {
    transform: rotate(-130deg);
  }

  to {
    transform: rotate(-140deg);
  }
}

@keyframes alert {
  from {
    box-shadow: 0 0 0 var(--black-hole-color);
  }

  to {
    box-shadow: 0 0 8px var(--black-hole-color);
  }
}

@keyframes engine-start {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

@keyframes descend {
  from {
    top: -60px;
    right: -60px;
    transform: scale(1);
  }

  to {
    top: -10px;
    right: -10px;
    transform: scale(0.8);
  }
}

@keyframes descend-dissapear {
  from {
    top: -10px;
    right: -10px;
    transform: scale(1);
  }

  to {
    top: 20px;
    right: 20px;
    transform: scale(0);
  }
}

@keyframes writhe {
  from {
    box-shadow: -4px -3px 35px var(--black-hole-color-2),
              -4px -3px 5px;
    transform: translateX(-1px) scale(1);
  }

  to {
    box-shadow: 4px 3px 35px,
              4px 3px 5px var(--black-hole-color-2);
    transform: translateX(1px) scale(0.95);
  }
}

@keyframes wiggle {
  from {
    transform: translateX(-3px);
  }

  to {
    transform: translateX(3px);
  }
}

@keyframes ring-writhe {
  from {
    transform: translateX(-2px) scale(1);
    box-shadow: -2px 5px 10px var(--black-hole-color);
  }

  to {
    box-shadow: 2px 5px 10px var(--black-hole-color-2);
    transform: translateX(2px) scale(0.95);
  }
}