Componente Pulsanti
Un semplice componente di pulsanti in stile Material Design, che utilizza una combinazione di colori monocromatica e supporta la modalità scura, adatto per siti Web aziendali/aziendali.
Codice 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>Componenti correlati
Componente Pulsanti
Componente pulsanti reattivi con Material Design, combinazione di colori triadica e supporto per temi scuri.
Componente Pulsanti
Un componente pulsanti in stile retrò/vintage che presenta effetti reattivi e supporto per temi scuri, progettato per evocare la nostalgia dell'estetica degli anni '80 e '90.
Componente Pulsanti
Un componente di pulsanti reattivi con supporto alla modalità scura, adatto per l'e-commerce, caratterizzato da una semplice combinazione di colori triadici.