按钮 · Perfect Hound

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

[hidecontent type="vip1"]

<button class="btn btn--primary">

  <span class="btn-inner">
    <span class="btn-label">
      Button 
    </span>
  </span>
  
</button>
<style>
/* From Uiverse.io by Phelix652 - Tags: button */
.btn {
  --btn-gradient: var(--btn-gradient-from),var(--btn-gradient-to);
  border: 0 none;
  appearance: none;
  transition: all .3s;
  border-radius: 10px;
  background-color: var(--btn-bg);
  box-shadow: 0 0 2px 2px var(--btn-shadow), 0 0 4px 4px var(--btn-shadow), 0 0 8px 8px var(--btn-shadow);
}

.btn,
.btn * {
  box-sizing: border-box;
}

.btn-inner {
  position: relative;
  border-radius: inherit;
  border: 1px solid transparent;
  font-size: 1rem;
  display: flex;
  align-items: center;
  min-width: 10rem;
  padding: 1.5rem 2rem;
  overflow: hidden;
  color: var(--btn-text-color);
}

.btn-label {
  position: absolute;
  bottom: 1px;
  left: 1px;
  right: 1px;
  top: 1px;
  border-radius: inherit;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--btn-bg);
  background-image: linear-gradient(to bottom,var(--btn-gradient));
}

.btn:hover {
  transform: translateY(-5px);
  letter-spacing: 3px;
  box-shadow: rgba(0, 131, 253, 0.596) 0px 1px 80px 40px;
}

.btn:active {
  border-radius: 40px;
  transform: translateY(4px);
  transition: 0.1s;
  letter-spacing: 3px;
  box-shadow: rgb(0, 131, 253) 0px 1px 80px 40px;
}

.btn:active .btn-blur:before {
  --transition: 0.5s;
}

.btn--primary {
  --btn-bg: #111111;
  --btn-gradient-from: #111111;
  --btn-gradient-to: rgba(29, 6, 240, 0.5);
  --btn-text-color: #ffffff;
  --btn-shadow: #9b14c438;
}

@keyframes turn {
  0% {
    transform: translateY(-50%) rotate(0deg)
  }

  to {
    transform: translateY(-50%) rotate(1turn)
  }
}

</style>

[/hidecontent]