按钮 · Quick Jellyfish

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

[hidecontent type="vip1"]

<button class="button">
  <div class="button-inner-wrap">
    <div class="button-content">
      <svg
        id="svg1"
        version="1.1"
        fill="none"
        viewBox="0 0 17.191999 17.915001"
        height="17.915001"
        width="17.191999"
      >
        <path
          id="path1"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="1.5"
          stroke="#000000"
          d="M 9.3223611,8.9119975 H 3.5673455 m -0.17238,0.7972 -1.3313244,3.0014005 c -0.8349111,2.493962 0.031033,4.403741 3.26073,2.9505 l 8.8532949,-4.5605 c 1.64001,-0.785228 1.659708,-3.5011752 0,-4.3772505 l -8.8707749,-4.56832 c -2.6423685,-1.18905255 -4.1290723,0.3343707 -3.26268,2.94464 l 1.3527044,3.09163 c 0.0935,0.2817 0.14026,0.4226 0.15871,0.5666 0.01638,0.1279 0.01621,0.2573 -4.9e-4,0.3851 -0.01883,0.144 -0.06594,0.2847 -0.16017,0.5662 z"
        ></path>
      </svg>

      <span>Send Message</span>
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by joe-herbert  - Tags: animation, button, hover, challenge */
.button {
  cursor: pointer;
  padding: 20px 15px;
  font-weight: 600;
  font-size: 17px;
  font-family: sans-serif;
  border-radius: 15px;
  position: relative;
  background-clip: padding-box;
  border: solid 3px transparent;
  width: 185px;
  height: 65px;
  box-shadow: 5px 5px 20px -5px #aaa;
  transition: transform 0.3s;
}
.button span {
  transition: opacity 0.3s 0.3s;
  margin-left: 5px;
}
.button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -3px;
  border-radius: inherit;
  background: linear-gradient(to bottom, #ccc, #666);
}
.button:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, #eee, #ddd);
  border-radius: 15px;
}
.button-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  transform: translateY(-50%);
}
.button-content:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-50% - 2.5px);
  right: 5px;
  bottom: 5px;
  left: 5px;
  background: linear-gradient(to bottom, #dfdfdf, #efefef);
  border-radius: 500px;
  height: 50px;
  transition: opacity 0.3s 0.3s;
  filter: blur(1px);
}
.button svg {
  position: relative;
  left: 0;
  width: 20px;
  transform: rotate(-45deg);
  transition: left 0.3s 0s, transform 0.3s 0s;
}

.button:hover .button-content:before,
.button:hover span {
  opacity: 0;
  transition: opacity 0.3s;
}
.button:hover svg {
  transition: left 0.6s 0.3s, transform 0.6s 0.3s;
  left: calc(50% - 17.5px);
  transform: translate(-50%, 2px) rotate(270deg) scale(1.5);
}
.button:active {
  transform: scale(0.9);
}
.button:active svg {
  animation: spin 0.4s ease-in-out 0.3s 1;
}

@keyframes spin {
  from {
    transform: translate(-50%, 2px) rotate(270deg) scale(1.5);
  }
  to {
    transform: translate(-50%, 2px) rotate(630deg) scale(1.5);
  }
}

</style>
    

[/hidecontent]