按钮 · Massive Jellyfish

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

[hidecontent type="vip1"]

<div class="btn-wrapper">
  <button class="btn"> button </button>
</div>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: button */
.btn-wrapper {
  width: 120px;
  height: 50px;
  position: relative;
  z-index: 1;
  background: linear-gradient(270deg, #96f061, #a259d3, #1d9de0, #e790b0);
  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.363);
  background-size: 800% 800%;
  animation: animateBorder 9s ease infinite;
}

.btn {
  width: 95%;
  height: 90%;
  position: absolute;
  padding: 5px;
  border: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #212121;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 4.5px;
  color: white;
  font-weight: bold;
}

@keyframes animateBorder {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

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

[/hidecontent]