按钮 · Ugly Ape

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

[hidecontent type="vip1"]

<button class="btn">
 <svg class="icon" width="30" height="30" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg>
</button>
<style>
/* From Uiverse.io by Peary74 - Tags: button, hover, active */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background-color: transparent;
  position: relative;
}

.btn:hover > .icon {
  transform: scale(1.2);
  cursor: pointer;
  transition: .2s linear;
}

.btn:focus > .icon {
  fill: #fd1853;
  animation: grosseur .2s linear;
}

@keyframes grosseur {
  0% {
    width: 50px;
    height: 50px;
    fill: #fd1853;
  }

  100% {
    width: 30px;
    height: 30px;
    fill: #fd1853;
  }
}






</style>

[/hidecontent]