VmVibe Materials
EN中文ESHIAR
返回地图
Game UI

RPG 金属按钮

一种幻想游戏按钮材质，用斜切边、暖金属、内凹深度和奖励感点击目标制造触感。

当前状态: ReadyRp
Rp

适用场景

  • 游戏落地页 CTA
  • 奖励按钮
  • 高级行动按钮

可调参数

  • bevel
  • metal contrast
  • inner shadow
  • radius
  • pressed depth

AI Prompt

生成 RPG 金属按钮：斜切边、暖金属渐变、雕刻内阴影、顶部亮高光和有触感的按下状态。

Tailwind 思路

使用嵌套渐变、内阴影、深色边框环和 active 时的轻微 translateY。

性能提醒

这个效果是静态的，成本低；装饰细节保持在按钮范围内。

CSS

.rpg-gold-button {
  border: 2px solid #6f4b12;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fff0a6 0%, #dca832 38%, #8c5a12 100%);
  color: #2b1804;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.58),
    inset 0 -5px 0 rgba(83,45,6,.48),
    0 10px 0 #4b2a08;
}

React 示例

export function RpgGoldButton({ children }) {
  return <button className="rpg-gold-button">{children}</button>;
}