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
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 Botones de Material Design
Componente de botones de diseño de materiales en tonos tierra para redes sociales
ArtDecoECommerceButtons
Un complejo conjunto de botones de comercio electrónico inspirados en el Art Deco con patrones geométricos y lujosos tonos Ocean/Blue, optimizados para la capacidad de respuesta y el modo oscuro.