Componente Botones
Un componente de botones simple diseñado con Material Design, que utiliza un esquema de color monocromático y admite el modo oscuro, adecuado para sitios web comerciales / corporativos.
Código HTML
<div class="flex flex-col items-center space-y-4 p-6 bg-gray-100 dark:bg-gray-800">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Buttons Component</h2>
<div class="flex space-x-4">
<button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Primary Button</button>
<button class="px-6 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-800 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-white">Secondary Button</button>
</div>
<div class="flex space-x-4">
<button class="px-6 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Tertiary Button</button>
<button class="px-6 py-2 rounded bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-300 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700">Outlined Button</button>
</div>
<div class="flex space-x-4">
<button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Large Button</button>
<button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Medium Button</button>
<button class="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Small Button</button>
</div>
</div>Componentes relacionados
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.
Componente Botones
Un componente de botones de estilo 3D adecuado para una cartera con un esquema de color análogo y compatibilidad con el modo oscuro.
Componente Botones
Componente de botones responsivos con diseño de materiales, combinación de colores triádica y compatibilidad con temas oscuros.