motionsites中文站 / 按钮 · Weak Moose
按钮 · Weak Moose
aadmin2026-09-19 发布组件0 阅读

按钮 · Weak Moose

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

[hidecontent type="vip1"]
<button class="button">
  <span class="front"> ⚡Join Now </span>
</button>

<style>
/* From Uiverse.io by RenouxM  - Tags: simple, 3d, button */
.button {
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  background-color: rgb(245, 134, 161);
  font-family: arial;
  font-size: 20px;
  font-weight: bold;
  border: none;
  width: 280px;
  height: 90px;
  border-radius: 12px;
}
.front {
  display: block;
  padding: 28px 80px;
  border-radius: 12px;
  font-size: 1.25rem;
  background: rgb(245, 74, 117);
  transform: translateY(-4px);
}
.button:focus:not(:focus-visible) {
  outline: none;
}

</style>
    
[/hidecontent]
← 返回首页