按钮 · Calm Shrimp

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

[hidecontent type="vip1"]

<button class="button">
  <i>
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <defs></defs>
      <title></title>
      <path
        class="a"
        d="M2.758,15.629a1.664,1.664,0,0,1-.882-3.075L20.359,1A1.663,1.663,0,0,1,22.875,2.72L19.281,21.893a1.664,1.664,0,0,1-2.966.691L11.1,15.629Z"
      ></path>
      <path
        class="a"
        d="M11.1,15.629H8.6V20.8a1.663,1.663,0,0,0,2.6,1.374l3.178-2.166Z"
      ></path>
      <line class="a" x1="11.098" x2="22.178" y1="15.629" y2="1.039"></line>
    </svg>
    Send Message</i
  >
</button>

<style>
/* From Uiverse.io by SiddhantEngineer  - Tags: simple, button, rounded, smooth, creative, advanced, click effect, 3d button */
.button {
  box-sizing: border-box;
  background: hsl(0, 0%, 91%);
  padding: 5px 2px;
  border-radius: 10px;
  box-shadow: 0px 1px 2px 1px hsl(0, 0%, 50%), 0px 10px 35px 0px hsl(0, 0%, 65%),
    0px -10px 35px 0px hsl(0, 0%, 100%);
  border: none;
  font-size: 16px;
  background-clip: padding-box;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.1s;
}

.button:active {
  scale: 99%;
  box-shadow: 0px 1px 2px 1px hsl(0, 0%, 70%), 0px 10px 35px 0px hsl(0, 0%, 75%),
    0px -10px 35px 0px hsl(0, 0%, 100%);
}

.button > i {
  background: linear-gradient(hsl(0, 0%, 80%), hsl(0, 0%, 93%));
  box-shadow: 0px 5px 20px -10px hsl(0, 0%, 60%);
  padding: 15px;
  border-radius: 20px;
  font-weight: 600;
  font-style: normal;
  display: flex;
  pointer-events: none;
}

.button > i > svg {
  width: 15px;
  margin-right: 5px;
  fill: none;
  stroke: black;
  pointer-events: none;
}

</style>
    

[/hidecontent]