按钮 · New Snail

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

[hidecontent type="vip1"]

<button class="button">
  <div>Hover</div>
</button>

<style>
/* From Uiverse.io by Subaashbala  - Tags: animation, button, animated, stripe */
.button {
  cursor: pointer;
  font-size: 1.25em;
  padding: 1em 2em;
  border-radius: 5px;
  border: none;
  position: relative;
  font-weight: 900;
  background: repeating-linear-gradient(
    45deg,
    rgb(255, 209, 124),
    rgb(255, 209, 124) 10px,
    rgb(255, 139, 97) 10px,
    rgb(255, 139, 97) 20px
  );
  animation: move 500ms infinite linear forwards;
  animation-play-state: paused;
  box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.199);
}
.button:hover {
  animation-play-state: running;
}
@keyframes move {
  from {
    background-position: 0;
  }
  to {
    background-position: 30px;
  }
}

</style>
    

[/hidecontent]