按钮 · Cold Ape

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

[hidecontent type="vip1"]

<button class="button">
  Join Today
  <p>→</p>
</button>

<style>
/* From Uiverse.io by ahmedyasserdev  - Tags: button */
.button {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  background-color: #9b59b6;
  border: none;
  padding: 15px 40px;
  border-radius: 12px;
  box-shadow:
    0px 5px #7d3c98,
    10px 14px 8px rgba(125, 60, 152, 0.4);
  cursor: pointer;
  transform: rotate3d(1, 1, 1, -10deg);
  display: flex;
  gap: 8px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px #7d3c98,
    0 6px 12px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(2px);
  box-shadow:
    0 2px #7d3c98,
    0 4px 8px rgba(0, 0, 0, 0.2);
}

.button:focus {
  outline: none;
}

</style>
    

[/hidecontent]