Botón Neumórfico

Este componente de botón implementa la popular tendencia de diseño neumórfico, creando un efecto plástico extruido suave que parece elevarse desde o estar grabado en el fondo. Utiliza sombras cuidadosamente elaboradas para lograr la apariencia 3D.

Características

• Diseño Neumórfico: Estética de interfaz suave con efectos 3D sutiles
• Estados Interactivos: Sombras diferentes para estados hover y activo
• Soporte Modo Oscuro: Se adapta al modo oscuro con sombras apropiadas
• Transiciones Suaves: Cambios de estado animados para mejor UX
• Responsivo: Funciona en todos los tamaños de pantalla

Uso

Para usar este botón, simplemente incluye el HTML y CSS en tu proyecto. El diseño depende en gran medida de los valores de box-shadow para crear el efecto neumórfico, así que asegúrate de que tu contenedor tenga un color de fondo sólido que coincida con el diseño (gris claro para modo claro, gris oscuro para modo oscuro).

Personalización

Puedes personalizar los siguientes aspectos:

• Colores: Ajusta el color de fondo y los colores de sombra para que coincidan con tu tema
• Profundidad: Modifica los valores de sombra para hacer el efecto más o menos pronunciado
• Tamaño: Cambia el padding y font-size para diferentes dimensiones de botón
• Redondeo: Ajusta border-radius para diferentes estilos de esquinas
• Transición: Modifica la duración y función de tiempo de la transición

Compatibilidad del Navegador

Este componente utiliza box-shadow y transiciones CSS estándar, compatibles en todos los navegadores modernos e IE9+.

Consideraciones de Diseño

El neumorfismo puede ser difícil de implementar con altos estándares de accesibilidad ya que las sombras sutiles pueden reducir el contraste. Considera aumentar el contraste del texto o añadir un borde ligero para mejor visibilidad en producción.