Código HTML
<div class="flex flex-wrap gap-4 p-4 bg-gray-100 dark:bg-gray-900">
<!-- Primary Button -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Primary Button
</button>
<!-- Secondary Button -->
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
Secondary Button
</button>
<!-- Success Button -->
<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-green-700 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
Success Button
</button>
<!-- Danger Button -->
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
Danger Button
</button>
<!-- Outline Button -->
<button class="bg-transparent hover:bg-blue-200 text-blue-700 font-semibold py-3 px-6 border border-blue-600 rounded-lg shadow-md transition duration-300 ease-in-out dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Outline Button
</button>
<!-- Disabled Button -->
<button class="bg-gray-300 text-gray-600 font-bold py-3 px-6 rounded-lg cursor-not-allowed shadow-md dark:bg-gray-700 dark:text-gray-500" disabled>
Disabled Button
</button>
</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.
3D_Healthcare_Buttons_Component
Un complejo componente de botones inspirado en 3D para aplicaciones de atención médica, con un diseño monocromático en blanco y negro con un color de acento brillante, diseño receptivo y compatibilidad con modo oscuro.
Componente de botones inmobiliarios Art Deco
Un complejo componente de botón inspirado en el Art Deco para plataformas inmobiliarias, con patrones geométricos, lujoso estilo en escala de grises y múltiples elementos interactivos, con capacidad de respuesta total y compatibilidad con el modo oscuro.