按钮 · Plastic Bulldog

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

[hidecontent type="vip1"]

<button class="button">
  <div class="inner">
    <div class="roundInner">
      <svg
        class="svg"
        xmlns="http://www.w3.org/2000/svg"
        width="1.3em"
        height="1.3em"
        viewBox="0 0 24 24"
      >
        <path
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="1.5"
          d="m5 12l-.604-5.437C4.223 5.007 5.825 3.864 7.24 4.535l11.944 5.658c1.525.722 1.525 2.892 0 3.614L7.24 19.466c-1.415.67-3.017-.472-2.844-2.028zm0 0h7"
        ></path>
      </svg>
      Send Message
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by Spacious74  - Tags: neumorphism, button, shadow, 3d button */
.button {
  cursor: pointer;
  background: linear-gradient(180deg, #cfcfcf, #808080);
  padding: 3px;
  border-radius: 15px;
  border: solid 1px #ebebeb;
  box-shadow: 0 3px 10px -1px #00000017, 0px 1px 5px #0000000e,
    0 10px 40px -15px #0000006e;
  transition: all 0.3s ease;
}
.inner {
  background: linear-gradient(180deg, #fff, #e0e0e0);
  padding: 5px;
  border-radius: 12px;
}
.roundInner {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: bold;
  padding: 14px 12px;
  border-radius: 300px;
  box-shadow: inset 0 10px 20px #0000000c;
  background-color: #f8fafa;
  transition: all 0.4s ease;
}
.roundInner .svg {
  transform: rotate(-45deg);
  margin-bottom: 5px;
  transition: all 0.3s ease;
}
.roundInner:active > .svg {
  transform: translate(3px, -3px) rotate(-45deg);
}

.button:active {
  box-shadow: none;
}

</style>
    

[/hidecontent]