VmVibe Materials
EN中文ESHIAR
Back to map
Game UI

RPG Gold Button

A fantasy game button material with bevels, warm metal, inner depth, and a reward-like click target.

Status: ReadyRp
Rp

Usage

  • Game landing CTAs
  • Reward buttons
  • Premium calls to action

Adjustable parameters

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

AI Prompt

Create an RPG gold button with beveled edges, warm metallic gradients, carved inner shadow, bright top highlight, and a tactile pressed state.

Tailwind notes

Use nested gradients, inset shadows, darker border rings, and a small translateY on active.

Performance notes

The effect is static and cheap. Keep decorative details within the button bounds.

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 example

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