按钮 · Rare Fox

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

[hidecontent type="vip1"]

<button class="button">
  <div class="wrapper">
    <svg
      width="25"
      height="45"
      viewBox="-0.5 0 25 25"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M2.33045 8.38999C0.250452 11.82 9.42048 14.9 9.42048 14.9C9.42048 14.9 12.5005 24.07 15.9305 21.99C19.5705 19.77 23.9305 6.13 21.0505 3.27C18.1705 0.409998 4.55045 4.74999 2.33045 8.38999Z"
        stroke="#000000"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
      <path
        d="M15.1999 9.12L9.41992 14.9"
        stroke="#000000"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>
    send message
  </div>
</button>

<style>
/* From Uiverse.io by Uzmakh  - Website: https://uiverse.io/ - Name: Shubhajit - Tags: simple, button, click, light&dark */
.button {
  padding: 8px;
  border-radius: 17px;
  border: none;
  border-bottom: 1px solid black;
  outline: none;
  cursor: pointer;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.wrapper {
  padding: 0 15px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: inset 5px 5px 15px #bababa, inset -5px -5px 15px #ffffff;
  display: flex;
  align-items: center;
  column-gap: 8px;
  font-weight: bold;
  text-transform: capitalize;
  border-radius: 20px;
}

</style>
    

[/hidecontent]