Game UI
RPG Gold Button
Bevels, warm metal, inner depth और reward-like click target वाला fantasy game button material.
Usage
- Game landing CTAs
- Reward buttons
- Premium CTAs
Parameters
- bevel
- metal contrast
- inner shadow
- radius
- pressed depth
AI Prompt
Beveled edges, warm metallic gradients, carved inner shadow, bright top highlight और tactile pressed state वाला RPG gold button बनाएं.
Tailwind notes
Nested gradients, inset shadows, darker border rings और active पर small translateY उपयोग करें.
Performance notes
Effect static और हल्का है. Decorative details 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>;
}