按钮 · Green Gecko

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

[hidecontent type="vip1"]

<div class="wrap">
    <button class="btn">
        <span class="text">Volume</span>
    </button>
</div>
<style>
/* From Uiverse.io by david-mohseni - Tags: button */
.wrap {
  text-align: center;
  margin: 20px 0;
}

.btn {
  width: 100px;
  height: 100px;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, transparent 3%), conic-gradient(white 0%, silver 10%, white 35%, silver 45%, white 60%, silver 70%, white 80%, silver 95%, white 100%);
  border-radius: 50%;
  box-shadow: 0 0px 20px #0005, 0 -0px 20px #fff2;
  outline: 1px solid #fff;
  outline-offset: -2px;
  transition: 1s;
}

.text {
  font-size: 20px;
  font-weight: 700;
  color: #aaa;
  text-align: center;
  text-shadow: 1px 1px 1px #fff;
}

.btn:hover {
  transform: rotate(90deg);
}
</style>

[/hidecontent]