按钮 · Funny Robin

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

[hidecontent type="vip1"]

<button>
  Button
</button>
<style>
/* From Uiverse.io by linkb15 - Tags: button */
button {
  --min-width: 180px;
  --min-height: 42px;
  --ring-min-size: 20px;
  --ring-max-size: 150px;
  --ring-width: 3px;
  --main-bg-color: #814fd1;
  --gradient-bg-color-1: rgb(222, 203, 226);
  --gradient-bg-color-2: rgb(79, 131, 209);
  --ring-color: #6f00ff;
  --shadow-color: rgba(79, 99, 209, 0.64);
  --hover-shadow-color: rgba(79, 99, 209, 0.64);
  --main-fg-color: #313133;
  --hover-fg-color: rgb(38, 11, 53);
  min-width: var(--min-width);
  min-height: var(--min-height);
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--main-fg-color);
  background: var(--main-bg-color);
  background: linear-gradient(66deg, var(--gradient-bg-color-1) 0%, var(--gradient-bg-color-2) 100%);
  border: none;
  border-radius: 999px;
  box-shadow: 12px 2px 24px var(--shadow-color);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;
}

button::before {
  content: '';
  border-radius: 999px;
  min-width: calc(var(--min-width) + 12px);
  min-height: calc(var(--min-height) + 12px);
  border: var(--ring-width) solid var(--ring-color);
  box-shadow: 0 0 60px var(--hover-shadow-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

button:hover, .button:focus {
  color: var(--hover-fg-color);
  transform: translateY(-6px);
}

button:active {
  color: var(--main-fg-color);
  transform: scale(0.95);
}

button:active::before {
  border: 0px solid var(--ring-color);
}

button:hover::before, button:focus::before {
  opacity: 1;
}

/* ring */
button::after {
  content: '';
  width: var(--ring-min-size);
  height: var(--ring-min-size);
  border-radius: 100%;
  border: var(--ring-width) solid var(--ring-color);
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

button:hover::after, button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: var(--ring-min-size);
    height: var(--ring-min-size);
    opacity: 0.5;
  }

  100% {
    width: var(--ring-max-size);
    height: var(--ring-max-size);
    opacity: 0;
  }
}
</style>

[/hidecontent]