按钮 · Big Baboon

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

[hidecontent type="vip1"]

<button class="button">Button</button>

<style>
/* From Uiverse.io by LeryLey  - Tags: button, hover, dark */
.button {
  cursor: pointer;
  position: relative;
  width: 125px;
  height: 40px;
  border-radius: 60px;
  background: #222;
  color: #fff;
  outline: none;
  overflow: hidden;
  border: 2px solid rgb(56, 56, 56);
  font-weight: 600;
  z-index: 1;
  transition: 0.5s;
}
.button:hover {
  color: white;
}
.button::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-radius: 50%;
  background: linear-gradient(
    to right,
    rgb(59, 59, 184),
    rgb(163, 65, 65),
    rgb(172, 26, 26)
  );
  left: -15px;
  bottom: 0;
  transform: translateY(50%);
  transition: 0.5s;
  z-index: -1;
}
.button:hover:before {
  width: 170px;
  height: 170px;
}

</style>
    

[/hidecontent]