按钮 · Tidy Dingo

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

[hidecontent type="vip1"]

<button>
  button
</button>
<style>
/* From Uiverse.io by RodrigoRVSN - Tags: button */
button {
  background-color: transparent;
  border: 1px solid #00b4d8;
  border-radius: 0.2rem;
  color: #00b4d8;
  font-weight: bold;
  padding: 0.8rem 1.5rem;
  position: relative;
  text-transform: uppercase;
  transition: ease-in 0.3s;
}

button:hover, button:active, button:focus {
  background: radial-gradient(#00b4d8, #4cc9f0);
  ;
  box-shadow: 0px 0px 0.3rem #00b4d8;
  color: #001219;
}

button::before {
  bottom: -0.5rem;
  content: '';
  left: 0;
  position: absolute;
}

button::after {
  top: -0.5rem;
  content: '';
  left: 0;
  position: absolute;
}

button:hover::before {
  animation: ease-in moveBar 0.6s forwards reverse;
}

button:hover::after {
  animation: ease-in moveBar 0.6s forwards;
}

@keyframes moveBar {
  0% {
    width: 0;
  }

  1% {
    border: 1px solid #00b4d8;
  }

  40% {
    width: 2rem;
  }

  99% {
    border: 1px solid #00b4d8;
    left: 99%;
  }

  100% {
    border: none;
    left: 100%;
    width: 0;
  }
}
</style>

[/hidecontent]