按钮 · Slimy Jellyfish

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

[hidecontent type="vip1"]

<button>
    Hover me!
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: gradient, button, circle */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  position: relative;
  cursor: pointer;
  height: 100px;
  border-radius: 100px;
  border: none;
  background: #333;
  color: #e5e5e5;
  font-weight: 600;
  box-shadow: inset 20px 20px 39px #080a10,
  inset -20px -20px 39px #1b263e;
  font-size: 13px;
}

button::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -10px;
  top: -10px;
  border-radius: 50%;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background: linear-gradient(35deg, rgb(47, 190, 238), rgb(218, 57, 143), rgb(139, 255, 23));
  filter: blur(10px);
}

button:hover::after {
  animation: rotcirclegr 1s linear infinite;
}

@keyframes rotcirclegr {
  to {
    transform: rotate(360deg);
  }
}
</style>

[/hidecontent]