Componente Pulsanti
Un componente Pulsanti progettato in stile Material Design con una combinazione di colori pastello, reattivo per siti Web aziendali/aziendali e che supporta temi scuri.
Codice HTML
<div class="flex flex-col space-y-4 p-4 max-w-md mx-auto">
<!-- Primary Button -->
<button class="bg-blue-400 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
Primary Button
</button>
<!-- Secondary Button -->
<button class="bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-green-600 dark:hover:bg-green-700">
Secondary Button
</button>
<!-- Disabled Button -->
<button class="bg-gray-300 text-gray-500 font-semibold py-2 px-4 rounded shadow-md cursor-not-allowed transition-opacity opacity-70 dark:bg-gray-700 dark:text-gray-400">
Disabled Button
</button>
<!-- Outline Button -->
<button class="border-2 border-blue-400 text-blue-400 font-semibold py-2 px-4 rounded hover:bg-blue-400 hover:text-white transition-colors dark:border-blue-600 dark:text-blue-600 dark:hover:bg-blue-600 dark:hover:text-white">
Outline Button
</button>
<!-- Icon Button -->
<button class="flex items-center bg-yellow-400 hover:bg-yellow-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Icon" class="w-5 h-5 mr-2 rounded-full">
Icon Button
</button>
</div>Componenti correlati
Pulsanti di intrattenimento giocosi
Una serie di pulsanti giocosi e divertenti progettati per una piattaforma di intrattenimento o multimediale, con colori tenui/desaturati ed elementi arrotondati. Reattivo e include il supporto per la modalità oscura.
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.
Skeuomorphic_Social_Buttons
Un complesso set di pulsanti scheumorfici con una combinazione di colori vivaci, progettato per le interfacce dei social media. Include il layout reattivo e il supporto per la modalità oscura, imitando i pulsanti del mondo reale.