按钮 · Evil Ape

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

[hidecontent type="vip1"]

 <div class="icon-conatiner">
    
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 19 21" height="21px" width="19px">
      <title>Group</title>
      <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="Page-1">
        <g transform="translate(-142.000000, -122.000000)" id="Artboard">
          <g transform="translate(142.000000, 122.000000)" id="Group">
            <path fill="#C4FFE4" id="Rectangle-Copy" d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"></path>
            <path fill="#85EBBC" id="Rectangle" d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"></path>
            <path fill="#64B18D" id="Path-2" d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z"></path>
          </g>
        </g>
      </g>
    </svg>
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 19 21" height="21px" width="19px">
      <title>Group</title>
      <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="Page-1">
        <g transform="translate(-142.000000, -122.000000)" id="Artboard">
          <g transform="translate(142.000000, 122.000000)" id="Group">
            <path fill="#C4FFE4" id="Rectangle-Copy" d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"></path>
            <path fill="#85EBBC" id="Rectangle" d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"></path>
            <path fill="#64B18D" id="Path-2" d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z"></path>
          </g>
        </g>
      </g>
    </svg>
  </div>
<div class="text">long press me</div>
<style>
/* From Uiverse.io by Codecite - Tags: icon, button, copy */
.icon-conatiner {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 20px 20px 15px 0 #ababab4d;
  cursor: pointer;
}

.icon-conatiner svg {
  width: 50px;
  height: auto;
}

.icon-conatiner svg:last-child {
  position: absolute;
}

.icon-conatiner:active {
  animation: press 0.2s 1 linear;
}

.icon-conatiner:active svg:last-child {
  animation: bounce 0.2s 1 linear;
}

.text {
  color: #666;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  user-select: none;
}

@keyframes press {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.92);
  }

  to {
    transform: scale(1);
  }
}

@keyframes bounce {
  50% {
    transform: rotate(5deg) translate(20px, -50px);
  }

  to {
    transform: scale(0.9) rotate(10deg) translate(50px, -80px);
    opacity: 0;
  }
}

</style>

[/hidecontent]