按钮 · Jolly Squid

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

[hidecontent type="vip1"]

<button>
  <span>Next</span>
  <svg width="15" height="15" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
</button>
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: button, buttons, desined Button */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s linear;
  border-radius: 10px;
  border: 1px solid #F2BED1;
  padding: 10px 20px;
}

button > svg {
  margin-left: 5px;
  transition: all 0.4s ease-in;
}

button:hover > svg {
  font-size: 1.2em;
  transform: translateX(6px);
}

button:hover {
  box-shadow: 10px 10px 40px #d1d1d1;
  transform: translateY(-5px);
}
</style>

[/hidecontent]