按钮 · Cuddly Cougar

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

[hidecontent type="vip1"]

<label for="button" class="label">
  <button id="button" class="button" name="button">
    <div class="roundThing">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="33"
        height="32"
        fill="none"
        viewBox="0 0 33 32"
        class="svg"
      >
        <path
          stroke="#161616"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="m10.367 8.427 11.32-3.774c5.08-1.693 7.84 1.08 6.16 6.16l-3.774 11.32c-2.533 7.614-6.693 7.614-9.226 0l-1.12-3.36-3.36-1.12c-7.614-2.533-7.614-6.68 0-9.226ZM13.98 18.2l4.773-4.786"
        ></path>
      </svg>
      <p>Send Message</p>
    </div>
  </button>
</label>

<style>
/* From Uiverse.io by Uncannypotato69  - Tags: simple, button, hover, light, modern, click, btn, simple button */
.button {
  height: fit-content;
  width: fit-content;
  background-color: #ebebeb;
  border-radius: 1rem;
  padding: 0.5em;
  position: relative;
  z-index: 1;
  transition: all 200ms;
  outline: none;
  border: none;
  cursor: pointer;
}

.label {
  --shadow-color: 0deg 0% 73%;
  --shadow: 0px 0.3px 0.4px hsl(var(--shadow-color) / 0.21),
    0.1px 1.7px 2px -0.3px hsl(var(--shadow-color) / 0.23),
    0.1px 3.1px 3.7px -0.7px hsl(var(--shadow-color) / 0.24),
    0.2px 5.2px 6.2px -1px hsl(var(--shadow-color) / 0.26),
    0.3px 8.5px 10.2px -1.3px hsl(var(--shadow-color) / 0.27),
    0.5px 13.6px 16.3px -1.7px hsl(var(--shadow-color) / 0.29),
    0.7px 21px 25.2px -2px hsl(var(--shadow-color) / 0.3);
  --shadow-hover: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.2),
    -0.1px 1.6px 1.9px -0.7px hsl(var(--shadow-color) / 0.22),
    -0.2px 3.7px 4.4px -1.3px hsl(var(--shadow-color) / 0.25);

  height: fit-content;
  width: fit-content;
  padding: 3px;
  background-image: linear-gradient(to bottom, #dddedd, #7a7b7a);
  border-radius: calc(1rem + 3px);
  transition: all 300ms;
  box-shadow: 0px 0px 0px 1px #fff, var(--shadow);
  color: #161616;
  cursor: pointer;
}

.label:has(button:hover) {
  transform: translate(0px, 4px);
  box-shadow: 0px 0px 0px 1px #fff, var(--shadow-hover);
}

.label:has(button:active) {
  transform: translate(0px, 8px);
  box-shadow: 0px 0px 0px 1px #fff;
}

.roundThing {
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
  width: fit-content;
  gap: 0.5em;
  padding: 1em;
  border-radius: 2rem;
  box-shadow: inset 0px 16px 16px 0px #d8dad8, inset 0px -16px 16px 0px #f4f6f5;
  overflow: hidden;
}

.button:hover .roundThing {
  box-shadow: inset 0px 8px 8px 0px #d8dad8, inset 0px -24px 24px 0px #f4f6f5;
  transition: all 300ms;
}

.roundThing p {
  font-weight: 700;
  color: #161616;
  letter-spacing: -0.03rem;
}

.svg {
  height: 1.5rem;
  aspect-ratio: 1/1;
  transition: transform 300ms;
}

.button:hover .svg {
  transform: rotate(45deg);
  animation: onHover 750ms ease infinite both;
  animation-delay: 300ms;
}

.button:active .svg {
  animation-play-state: paused;
}

@keyframes onHover {
  50% {
    translate: 4px;
  }
}

</style>
    

[/hidecontent]