按钮 · Wonderful Penguin

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

[hidecontent type="vip1"]

<button class="button">
  <div class="line one">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
  <div class="line two">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
  <div class="line three">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
    <div class="line four">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
    
    <div class="line five">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
    
    <div class="line six">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
    
    <div class="line seven">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
</button>
<style>
/* From Uiverse.io by benjimich - Tags: button, hover */
.button {
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  width: 70px;
  gap: 4px;
}

.button:hover {
  animation: move 2s infinite ease;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(20px);
  }

  100% {
    transform: translateX(0);
  }
}

.round {
  width: 6px;
  height: 6px;
  background: #3da9fc;
  border-radius: 50%;
}

.line {
  display: flex;
  gap: 4px;
}

.two {
  transform: translateX(10px);
}

.three {
  transform: translateX(20px);
}

.four {
  transform: translateX(30px);
}

.five {
  transform: translateX(20px);
}

.six {
  transform: translateX(10px);
}
</style>

[/hidecontent]