按钮 · Curly Cheetah

类型：组件　·　分类：按钮　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

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

</style>

[/hidecontent]