按钮 · Hungry Cougar

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

[hidecontent type="vip1"]

<button class="button">
  hover me
  <span></span><span></span><span></span><span></span>
</button>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: simple, minimalist, button */
.button {
  cursor: pointer;
  --c: #0ea5e9;
  padding: 12px 28px;
  margin: 1em;
  position: relative;
  min-width: 12em;
  background: transparent;
  font-size: 12px;
  font-weight: bold;
  color: var(--c);
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 0.1em;
  border: 2px solid var(--c);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
  transition: 0.5s;
}

.button span {
  position: absolute;
  width: 25%;
  height: 100%;
  background-color: var(--c);
  transform: translateY(150%);
  border-radius: 50%;
  left: calc((var(--n) - 1) * 25%);
  transition: 0.5s;
  transition-delay: calc((var(--n) - 1) * 0.1s);
  z-index: -1;
}

.button:hover {
  color: black;
}

.button:hover span {
  transform: translateY(0) scale(2);
}

.button span:nth-child(1) {
  --n: 1;
}

.button span:nth-child(2) {
  --n: 2;
}

.button span:nth-child(3) {
  --n: 3;
}

.button span:nth-child(4) {
  --n: 4;
}

</style>
    

[/hidecontent]