Game UI
RPG Gold Button
مادة زر fantasy مع حواف مشطوفة ومعدن دافئ وعمق داخلي وإحساس مكافأة.
الاستخدامات
- أزرار صفحات ألعاب
- أزرار مكافأة
- دعوات فعل فاخرة
المعاملات
- 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>;
}