Componente Botones
Un componente de botones diseñado en estilo Material Design con una combinación de colores pastel, responsivo para sitios web comerciales / corporativos y compatible con temas oscuros.
Código HTML
<div class="flex flex-col space-y-4 p-4 max-w-md mx-auto">
<!-- Primary Button -->
<button class="bg-blue-400 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
Primary Button
</button>
<!-- Secondary Button -->
<button class="bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-green-600 dark:hover:bg-green-700">
Secondary Button
</button>
<!-- Disabled Button -->
<button class="bg-gray-300 text-gray-500 font-semibold py-2 px-4 rounded shadow-md cursor-not-allowed transition-opacity opacity-70 dark:bg-gray-700 dark:text-gray-400">
Disabled Button
</button>
<!-- Outline Button -->
<button class="border-2 border-blue-400 text-blue-400 font-semibold py-2 px-4 rounded hover:bg-blue-400 hover:text-white transition-colors dark:border-blue-600 dark:text-blue-600 dark:hover:bg-blue-600 dark:hover:text-white">
Outline Button
</button>
<!-- Icon Button -->
<button class="flex items-center bg-yellow-400 hover:bg-yellow-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Icon" class="w-5 h-5 mr-2 rounded-full">
Icon Button
</button>
</div>Componentes relacionados
Componente de botones de neumorfismo
Un componente de botón complejo de estilo Neumorphism con colores vibrantes, diseño receptivo y compatibilidad con modo oscuro, adecuado para sitios web comerciales / corporativos.
Componente Botones de morfismo de vidrio
Botones de morfismo de vidrio que usan tonos tierra para un sitio de portafolio receptivo con modo oscuro
Componente Botones
Un conjunto de botones interactivos diseñados para un portafolio, con microinteracciones, una combinación de colores complementaria y una capacidad de respuesta completa con soporte para modo oscuro.