Game UI
RPG Gold Button
Un material de botón fantasy con bisel, metal cálido, profundidad interna y sensación de recompensa.
Usos
- CTAs de juegos
- Botones de recompensa
- Llamadas premium
Parámetros
- bevel
- metal contrast
- inner shadow
- radius
- pressed depth
Prompt IA
Crea un botón RPG dorado con biseles, gradientes metálicos cálidos, sombra interna y estado presionado táctil.
Notas Tailwind
Usa gradientes anidados, sombras inset, bordes oscuros y translateY pequeño en active.
Rendimiento
El efecto es estático y ligero. Mantén los detalles dentro del botón.
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;
}Ejemplo React
export function RpgGoldButton({ children }) {
return <button className="rpg-gold-button">{children}</button>;
}