Componente Pulsanti
Un componente pulsante minimalista per le dashboard, con supporto per il design reattivo e il tema scuro.
Codice HTML
<div class="flex space-x-4 p-4 bg-gray-100 dark:bg-gray-900">
<!-- Primary Button -->
<button class="px-4 py-2 rounded-md
bg-blue-500 text-white font-semibold
hover:bg-blue-600
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
dark:bg-blue-700 dark:hover:bg-blue-600">
Primary Action
</button>
<!-- Secondary Button -->
<button class="px-4 py-2 rounded-md
bg-gray-300 text-gray-800 font-semibold
hover:bg-gray-400
focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-75
dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
Secondary Action
</button>
<!-- Success Button -->
<button class="px-4 py-2 rounded-md
bg-green-500 text-white font-semibold
hover:bg-green-600
focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75
dark:bg-green-700 dark:hover:bg-green-600">
Success
</button>
<!-- Danger Button -->
<button class="px-4 py-2 rounded-md
bg-red-500 text-white font-semibold
hover:bg-red-600
focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75
dark:bg-red-700 dark:hover:bg-red-600">
Delete
</button>
<!-- Disabled Button -->
<button class="px-4 py-2 rounded-md
bg-gray-200 text-gray-500 font-semibold
cursor-not-allowed
dark:bg-gray-800 dark:text-gray-600"
disabled>
Disabled
</button>
</div>
Componenti correlati
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.
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 in stile 3D adatto a un portfolio con una combinazione di colori analoga e supporto per la modalità scura.