按钮 · Nasty Mouse

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

[hidecontent type="vip1"]

<button class="button">
  <div class="in">
    <div class="image">
      <svg
        fill="#000000"
        width="25px"
        height="25px"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        transform="rotate(-45)"
      >
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g
          id="SVGRepo_tracerCarrier"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <path
            d="M20.34,9.32l-14-7a3,3,0,0,0-4.08,3.9l2.4,5.37h0a1.06,1.06,0,0,1,0,.82l-2.4,5.37A3,3,0,0,0,5,22a3.14,3.14,0,0,0,1.35-.32l14-7a3,3,0,0,0,0-5.36Zm-.89,3.57-14,7a1,1,0,0,1-1.35-1.3l2.39-5.37A2,2,0,0,0,6.57,13h6.89a1,1,0,0,0,0-2H6.57a2,2,0,0,0-.08-.22L4.1,5.41a1,1,0,0,1,1.35-1.3l14,7a1,1,0,0,1,0,1.78Z"
          ></path>
        </g>
      </svg>
    </div>
    <div class="text">Send Message</div>
  </div>
</button>

<style>
/* From Uiverse.io by anushkaps  - Tags: animation, alert, gradient, button, code, svg, arrow, 2d button */
.button {
  cursor: pointer;
  height: 6em;
  width: 18em;
  border-radius: 1em;
  border-top: 0.2em solid #b0b1b0;
  border-bottom: 0.2em solid #50504f;
  border-left: 0.2em solid #848584;
  border-right: 0.2em solid #848584;
  box-shadow: 0.3em 0.3em 0.5em #a9aaa9;
  background: linear-gradient(to bottom, #fbfcfb, #ecedec);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 0.2em;
  background: linear-gradient(135deg, #b0b1b0, #848584, #50504f);
  z-index: -1;
}

.in {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4.8em;
  width: 16.9em;
  border-radius: 2em;
  background: linear-gradient(to bottom, #eceeec, #ffffff);
  transition: background 2s, transform 2s ease;
}

.text {
  font-size: 21px;
  font-weight: bold;
  width: 9em;
  color: #252625;
  transition: transform 0.6s ease-in-out;
}

.image {
  padding-left: 1.2em;
  transition: transform 0.3s ease-in-out;
}

.image svg {
  transition: transform 0.6s ease-in-out; /* Smooth rotation */
}

.button:hover .in {
  background: linear-gradient(to bottom, #ffffff, #eceeec);
  transform: scale(1.05);
}

.button:hover .image {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

.button:hover svg {
  transform: translateX(6.5em) rotate(2deg);
}

.button:hover .text {
  transform: translateX(9em);
}

.button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }
  to {
    transform: translateY(-0.1em);
  }
}

</style>
    

[/hidecontent]