按钮 · Pretty Snail

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

[hidecontent type="vip1"]

<button class="button">
  <svg viewBox="2.5 -15 13 13" xmlns="http://www.w3.org/2000/svg">
    <path
      fill="none"
      stroke-width="1"
      stroke="#000000"
      d="M 8 -7 C 9 -1 11.368 -2.531 12 -4 C 13 -6.6667 14 -9.3333 14.763 -11.565 C 15.381 -13.129 13.796 -14.529 12 -14 C 9.3333 -13 6.6667 -12 4.144 -10.825 C 1.613 -9.096 5.77 -7.45 7.828 -7.1 C 8.5757 -7.9023 9.3233 -8.7047 10.071 -9.507 C 9.385 -8.6703 8.699 -7.8337 8.013 -6.997"
    ></path>
  </svg>
  <p>Send message</p>
</button>

<style>
/* From Uiverse.io by csozidev  - Tags: simple, button, light, challenge, simple button */
.button {
  cursor: pointer;
  display: flex;
  height: 70px;
  width: 205px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  background: linear-gradient(0deg, #ebedeb, #ffffff);
  border-radius: 15px;
  position: relative;
  box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.3);
}

.button::before {
  content: "";
  position: absolute;
  width: 96%;
  background: linear-gradient(180deg, #ebedeb, #ffffff);
  height: 80%;
  border-radius: 100px;
  z-index: 5;
}

button::after {
  content: "";
  position: absolute;
  width: calc(100% + 6px);
  background: linear-gradient(0deg, #7e807e, #e3e6e4);
  height: calc(100% + 6px);
  z-index: -1;
  border-radius: 18px;
  top: -3px;
  left: -3px;
}

.button svg {
  stroke-linecap: round;
  width: 20px;
  z-index: 10;
}

.button p {
  white-space: nowrap;
  font-weight: 600;
  font-size: 20px;
  z-index: 10;
}

</style>
    

[/hidecontent]