Componente Botones
Un componente de botones responsivos con soporte de modo oscuro para carteras. Presenta un diseño plano minimalista en escala de grises con complejidad moderada.
Código HTML
<div class="flex flex-col items-center justify-center gap-4 p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
<!-- Primary Button -->
<button class="px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
Primary Action
</button>
<!-- Secondary Button -->
<button class="px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
Secondary Action
</button>
<!-- Tertiary Button (Icon only example) -->
<button class="flex items-center justify-center w-12 h-12 text-gray-800 bg-transparent border-2 border-gray-800 rounded-full shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
<!-- Responsive Example (adjusts layout on larger screens) -->
<div class="flex flex-col md:flex-row items-center justify-center gap-4 w-full">
<button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
Responsive Button 1
</button>
<button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
Responsive Button 2
</button>
</div>
</div>Componentes relacionados
Componente de botones de brutalismo
Un componente de botones con un diseño brutalista, con colores de alta saturación, diseño receptivo y soporte de modo oscuro, adecuado para sitios web comerciales y 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 de botones neumórficos
Un componente de botón con un estilo de diseño neumórfico con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.