按钮 · Dangerous Donkey

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

[hidecontent type="vip1"]

<button class="button">
            <span class="btn__icon">
                <svg stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path fill="none" d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"></path>
                    <path d="M9 15l3 -3l3 3"></path>
                    <path d="M12 12l0 9"></path>
                </svg>
            </span>
            <span class="btn__text">Upload</span>
        </button>
<style>
/* From Uiverse.io by Creatlydev - Tags: neumorphism, button, simple button */
.button {
  --bg: linear-gradient(180deg,
            hsla(0, 0%, 100%, .1),
            hsla(0, 0%, 100%, 0)),
        hsl(128, 52%, 45%);
  box-shadow: 0 1px 2px #25114f66, 0 0 0 1px hsla(128, 50%, 45%, 0.761);
  background-color: transparent;
  border: none;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  cursor: pointer;
  padding-right: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--bg);
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid #fff3;
}
</style>

[/hidecontent]