按钮 · Loud Goat

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

[hidecontent type="vip1"]

<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 97 162" height="162" width="97" class="svg">
<path fill="#262626" d="M47.2124 0H54.0796V151.644L86.6991 128.712H97L50.646 162L0 128.712H10.3009L47.2124 151.644V0Z"></path>
</svg>

</button>
<style>
/* From Uiverse.io by chethan025 - Tags: button, scroll snap */
.button {
  width: 38px;
  height: 82px;
  padding: 2px;
  border: 1px solid #474747;
  border-radius: 50px;
  background: rgba(141, 141, 141, 0.18);
  transition: all 0.3s ease-in-out;
  transform: rotate(180deg);
}

.svg {
  width: 22px;
  height: 62px;
  transform: rotate(180deg);
}

.button:hover {
  transform: scale(-1.2);
}

.button:focus {
  height: 0px;
  width: 0px;
  padding: 0px;
  border: 0px;
}

.button:focus > .svg {
  display: none;
  height: 0px;
}
  
  
  
  
</style>

[/hidecontent]