按钮 · Lovely Bullfrog

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

[hidecontent type="vip1"]

<div class="button">EXPLORE GALAXY</div>
<style>
/* From Uiverse.io by n-jaisabai - Tags: button */
.button {
  background: radial-gradient(ellipse at top, white, blue, black, black);
  color: white;
  position: relative;
  background-size: 130% 130%;
  background-position: center center;
  padding: 15px 30px;
}

.button:hover {
  background: radial-gradient(ellipse at top, white, blue, black, black);
  animation: gradient 4s;
  animation-fill-mode: forwards;
  /* background-position: center center; */
}

.button:hover:after {
  content: "";
  position: absolute;
  inset: -.625em;
  background: radial-gradient(ellipse at top, white, blue, black, black);
  /* background-position: center center; */
  filter: blur(1.5em);
  z-index: -1;
  animation: gradient 4s;
  animation-fill-mode: forwards;
}

@keyframes gradient {
  0% {
    background-size: 130% 130%;
  }

  100% {
    background-size: 200% 200%;
  }
}

</style>

[/hidecontent]