按钮 · Jolly Moose

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

[hidecontent type="vip1"]

<button class="button">
  <span>Explore </span>
</button>
<style>
/* From Uiverse.io by praveen-prasad2 - Tags: button */
.button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 3px;
  border-radius: 6px;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(115deg,
        #4fcf70, #fad648, 
        #a767e5,#12bcfe, 
        #44ce7b);
  background-size: 50% 100%;
  border-radius: inherit;
}

.button:hover::before {
  animation: animate_border .75s
        linear infinite;
}

.button span {
  position: relative;
  z-index: 2;
  display: block;
  background-color: #000;
  padding: 13px 20px;
  border-radius: 3px;
}

@keyframes animate_border {
  to {
    transform: translateX(-50%)
  }
}

</style>

[/hidecontent]