العودة إلى الخريطة
Game UI

RPG Gold Button

مادة زر fantasy مع حواف مشطوفة ومعدن دافئ وعمق داخلي وإحساس مكافأة.

الحالة: جاهزRp
Rp

الاستخدامات

  • أزرار صفحات ألعاب
  • أزرار مكافأة
  • دعوات فعل فاخرة

المعاملات

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

AI Prompt

أنشئ زر RPG ذهبي بحواف مشطوفة وتدرجات معدنية دافئة وظل داخلي ولمعة علوية وحالة ضغط ملموسة.

ملاحظات Tailwind

استخدم gradients متداخلة وظلال inset وحدود داكنة و 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>;
}